<template>
<!-- 考核指标录入 -->
  <div class="dashboard-container">
    <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true" :model="searchInfo">
        <el-form-item label="考核指标">
          <el-input
            placeholder="请输入名称"
            v-model="searchInfo.title"
            clearable>
          </el-input>
        </el-form-item>
        <!-- <el-form-item label="是否通用" prop="share">
            <el-select v-model="searchInfo.share" placeholder="请选择是否通用">
                <el-option label="通用指标" :value=1></el-option>
                <el-option label="个性指标" :value=2></el-option>
            </el-select>
        </el-form-item> -->
        <!-- <el-form-item v-if="searchInfo.share==2" label="关联部门" prop="relevantdepartments">
          <el-cascader clearable v-model="searchInfo.relevantdepartments" :options="grouplist" :show-all-levels="false" :props="props"></el-cascader>
        </el-form-item> -->
        <el-form-item label="关联部门" prop="relevantdepartments">
          <el-cascader filterable clearable v-model="searchInfo.relevantdepartments" :options="grouplist" :show-all-levels="false" :props="props"></el-cascader>
        </el-form-item>
        <el-form-item label="指标维度" prop="dimension">
            <el-select v-model="searchInfo.dimension" clearable placeholder="请选择考核维度">
                <el-option
                v-for="item in dutyclasslist"
                :key="item.outId"
                :label="item.title"
                :value="item.outId">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="指标性质" prop="type">
            <el-select v-model="searchInfo.type" placeholder="请选择指标性质">
                <el-option label="定性指标" :value=1></el-option>
                <el-option label="定量指标" :value=2></el-option>
            </el-select>
        </el-form-item>
        <!-- <el-form-item label="状态">
          <el-select v-model="searchInfo.state" clearable placeholder="请选择状态">
            <el-option :value=1 label="正常">正常</el-option>
            <el-option :value=2 label="禁止">禁止</el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          <el-button size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <div class="gva-btn-list">
        <el-button size="mini" type="primary" icon="el-icon-plus" @click="showAdd()">新增</el-button>
      </div>
      <el-table :data="tableData">
        <el-table-column align="left" label="考核指标" prop="title"/>
        <el-table-column align="left" label="考核维度" prop="dimensionname"/>
        <el-table-column align="left" label="指标性质">
            <template #default="scope">
              <div v-if="scope.row.type==1">定性指标</div>
              <div v-if="scope.row.type==2">定量指标</div>
            </template>
        </el-table-column>
        <!-- <el-table-column align="left" label="是否通用">
            <template #default="scope">
              <div v-if="scope.row.share==1">通用指标</div>
              <div v-if="scope.row.share==2">个性指标</div>
            </template>
        </el-table-column> -->
        <el-table-column align="left" label="计量单位" prop="unites"/>
        <el-table-column align="left" label="考核周期" prop="outId">
            <template #default="scope">
              <el-tag v-if="scope.row.cycle==1">班</el-tag>
              <el-tag v-if="scope.row.cycle==2">天</el-tag>
              <el-tag v-if="scope.row.cycle==3">周</el-tag>
              <el-tag v-if="scope.row.cycle==4">月</el-tag>
              <el-tag v-if="scope.row.cycle==5">季度</el-tag>
              <el-tag v-if="scope.row.cycle==6">年</el-tag>
            </template>
        </el-table-column>
        <el-table-column align="left" label="计分方式" prop="outId">
            <template #default="scope">
              <el-tag v-if="scope.row.scoringmethod==1">自动计分</el-tag>
              <el-tag v-if="scope.row.scoringmethod==2">手动计分</el-tag>
              
            </template>
        </el-table-column>
        
        <el-table-column align="left" label="关联部门">
            <template #default="scope">
              <el-collapse>
                <el-collapse-item title="详情" name="1">
                  <div v-for="(iteam,index) in scope.row.relevantdepartmentsmap">
                    {{iteam.title}}
                  </div>
                </el-collapse-item>
              </el-collapse>
              <!-- <div v-for="item in scope.row.relevantdepartmentsmap" :key="item.key">{{item.title}}</div> -->
            </template>
        </el-table-column>
        <el-table-column align="left" label="数据提交">
            <template #default="scope">
              <div v-for="item in scope.row.reportmap" :key="item.key">{{item.title}}</div>
            </template>
        </el-table-column>
        <el-table-column align="left" label="辅助计数" prop="cycleattr"/>
        <el-table-column align="left" label="状态">
            <template #default="scope">
                <el-switch
                    inline-prompt 
                    v-model="scope.row.state"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value=1
                    :inactive-value=2
                    @change="changeVal($event,scope.row.outid)"
                    />
             </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button
              icon="el-icon-edit"
              size="small"
              type="text"
              @click="showEdit(scope.row)"
            >编辑</el-button>
            <el-button
              icon="el-icon-delete"
              size="small"
              type="text"
              @click="deleteOperate(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 30, 50, 100]"
          :page-size="searchInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
        </div>
      </div>
      <!-- 新增弹框 -->
      <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" :before-close="closeDialog" title="新增" width="30%">
        <el-form ref="addForm" :model="form" :rules="rules" label-width="150px">
            <el-form-item label="指标名称" prop="title">
              <el-input v-model="form.title" autocomplete="off" />
            </el-form-item>
            <!-- <el-form-item label="是否通用" prop="share">
                <el-select v-model="form.share" placeholder="请选择是否通用">
                    <el-option label="通用指标" :value=1></el-option>
                    <el-option label="个性指标" :value=2></el-option>
                </el-select>
            </el-form-item> -->
            <!-- <el-form-item v-if="form.share==2" label="关联部门" prop="relevantdepartments">
              <el-cascader clearable v-model="form.relevantdepartments" :options="grouplist" :show-all-levels="false" :props="props"></el-cascader>
            </el-form-item> -->
            <el-form-item label="关联部门" prop="relevantdepartments">
              <el-cascader filterable clearable v-model="form.relevantdepartments" :options="grouplist" :show-all-levels="false" :props="props"></el-cascader>
            </el-form-item>
            <el-form-item label="指标维度" prop="dimension">
                <el-select v-model="form.dimension" clearable placeholder="请选择考核维度">
                    <el-option
                    v-for="item in dutyclasslist"
                    :key="item.outId"
                    :label="item.title"
                    :value="item.outId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="指标性质" prop="type">
                <el-select v-model="form.type" placeholder="请选择指标性质">
                    <el-option label="定性指标" :value=1></el-option>
                    <el-option label="定量指标" :value=2></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="计量单位" prop="unites">
                <el-input v-model="form.unites" autocomplete="off" />
            </el-form-item>
            <el-form-item label="数据提交" prop="report">
              <!-- <el-cascader clearable v-model="form.report" :options="grouplistBackup" :show-all-levels="false" :props="userProps"></el-cascader> -->
              <el-cascader filterable clearable v-model="form.report" :options="grouplistBackup" :show-all-levels="false" :props="userProps"></el-cascader>
            </el-form-item>
            <el-form-item label="辅助计数" prop="cycleattr">
                <el-input v-model="form.cycleattr" autocomplete="off" />
            </el-form-item>
            <el-form-item label="计分方式" prop="type">
                <el-select v-model="form.scoringmethod" placeholder="请选择指标性质">
                    <el-option label="自动计分" :value=1></el-option>
                    <el-option label="手动计分" :value=2></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="考核周期" prop="cycle">
                <el-select v-model="form.cycle" placeholder="请选择考核周期">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer"> 
            <el-button size="small" @click="closeDialog">取 消</el-button>
            <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 编辑弹框 -->
      <el-dialog :close-on-click-modal="false" :visible.sync="editDialogFormVisible" :before-close="editCloseDialog" title="修改" width="20%">
        <el-form ref="editForm" :model="editAdd" :rules="editRules" label-width="150px">
            <el-form-item label="指标名称" prop="title">
                <el-input v-model="editAdd.title" autocomplete="off" />
            </el-form-item>
            <!-- <el-form-item label="是否通用" prop="share">
                <el-select v-model="editAdd.share" placeholder="请选择是否通用">
                    <el-option label="通用指标" :value=1></el-option>
                    <el-option label="个性指标" :value=2></el-option>
                </el-select>
            </el-form-item> -->
            
            <!-- <el-form-item v-if="editAdd.share==2" label="关联部门" prop="relevantdepartmentsmap">
              <el-cascader clearable v-model="editAdd.relevantdepartmentsmap" :options="grouplist" :show-all-levels="false" :props="props"></el-cascader>
            </el-form-item> -->
            <el-form-item label="关联部门" prop="relevantdepartmentsmap">
              <el-cascader filterable clearable v-model="editAdd.relevantdepartmentsmap" :options="grouplist" :show-all-levels="false" :props="props"></el-cascader>
            </el-form-item>
            <el-form-item label="指标维度" prop="dimensionidstr">
                <el-select v-model="editAdd.dimensionidstr" clearable placeholder="请选择考核维度">
                    <el-option
                    v-for="item in dutyclasslist"
                    :key="item.outId"
                    :label="item.title"
                    :value="item.outId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="指标性质" prop="type">
                <el-select v-model="editAdd.type" placeholder="请选择指标性质">
                    <el-option label="定性指标" :value=1></el-option>
                    <el-option label="定量指标" :value=2></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="计量单位" prop="unites">
                <el-input v-model="editAdd.unites" autocomplete="off" />
            </el-form-item>
            
            <el-form-item label="数据提交" prop="report">
              <el-cascader filterable clearable v-model="editAdd.reportmap" :options="grouplistBackup" :show-all-levels="false" :props="userProps"></el-cascader>
            </el-form-item>
            <el-form-item label="辅助计数" prop="cycleattr">
                <el-input v-model="editAdd.cycleattr" autocomplete="off" />
            </el-form-item>
            <el-form-item label="计分方式" prop="type">
                <el-select v-model="editAdd.scoringmethod" placeholder="请选择指标性质">
                    <el-option label="自动计分" :value=1></el-option>
                    <el-option label="手动计分" :value=2></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="考核周期" prop="cycle">
                <el-select v-model="editAdd.cycle" placeholder="请选择考核周期">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer"> 
            <el-button size="small" @click="editCloseDialog">取 消</el-button>
            <el-button size="small" type="primary" @click="editEnterDialog">确 定</el-button>
          </div>
        </template>
      </el-dialog>
  </div>
</template>

<script>
import { dutyclasslist } from '@/api/duty/dimension'
import { gettarget,addtarget,gettargetinfo,eiteassessinfo,eitetarget,deltarget } from '@/api/duty/project'
import {
  getgroupdepartmap,
  getgroupuser
} from '@/api/duty/group'
export default {
  name: 'Dashboard',
  data() {
    return {
      grouplistBackup:[],
      grouplist:[],
      // 1：班；2：天；3：周；4：月；5：季度；6：年
        options: [
        //   {
        //     value: 1,
        //     label: '班'
        // }, {
        //     value: 2,
        //     label: '天'
        // }, {
        //     value: 3,
        //     label: '周'
        // }, 
        {
            value: 4,
            label: '月'
        }, {
            value: 5,
            label: '季度'
        }, {
            value: 6,
            label: '年'
        }],
      props: {
        checkStrictly: true,
        value: "id",
        label: "name",
        children: "children",
        emitPath:false,
        multiple: true
      },
      userProps: {
        value: "key",
        label: "name",
        children: "govlist",
        emitPath:false,
        multiple: true
      },
      dutyclasslist:{},
      searchList:{
        page:1,
        pagesize:10000,
      },
      // 查询详情的数据
      editFrom:{},
      // 修改状态提交数据
      switchFrom:{},
      // 删除数据提交
      deleFrom:{},
      // 编辑时数据
      editAdd:{
          unittitle:'',
          parentId:''
      },
      assessList:{},
      // 添加数据
      form:{
        share:2,
        cycleattr:1,
        scoringmethod:1
      },
      // 弹窗变量
      dialogFormVisible:false,
      // 修改弹窗
      editDialogFormVisible:false,
      total: 0,
      tableData:[],
      // 条件查询变量
      searchInfo: {
        page: 1,
        pagesize: 10
      },
      // 条件查询变量
      abc:{
        aaa:"111",
        bbb:"222"
      },
      // 添加时验证规则
      rules: {
        title: [{ required: true, message: '必填', trigger: 'blur' }],
        type: [{ required: true, message: '必填', trigger: 'blur' }],
        // share: [{ required: true, message: '必填', trigger: 'blur' }],
        relevantdepartments: [{ required: true, message: '必填', trigger: 'blur' }],
        dimension: [{ required: true, message: '必填', trigger: 'blur' }],
        report: [{ required: true, message: '必填', trigger: 'blur' }],
        unites: [{ required: true, message: '必填', trigger: 'blur' }],
        cycle: [{ required: true, message: '必填', trigger: 'blur' }],
        cycleattr: [{ required: true, message: '必填', trigger: 'blur' }],
      },
      editRules:{
        title: [{ required: true, message: '必填', trigger: 'blur' }],
        type: [{ required: true, message: '必填', trigger: 'blur' }],
        // share: [{ required: true, message: '必填', trigger: 'blur' }],
        relevantdepartments: [{ required: true, message: '必填', trigger: 'blur' }],
        dimension: [{ required: true, message: '必填', trigger: 'blur' }],
        report: [{ required: true, message: '必填', trigger: 'blur' }],
        unites: [{ required: true, message: '必填', trigger: 'blur' }],
        cycle: [{ required: true, message: '必填', trigger: 'blur' }],
        cycleattr: [{ required: true, message: '必填', trigger: 'blur' }],
      }
    }
  },
  created() {
    console.log(this.$store.state.user.token)
    if (this.$store.state.user.token=='') {
      this.$router.push('/login')
    }
    // 页面渲染时获取初始数据
    this.getDataList()
    this.getDutyclasslist()
    this.getSystemadminlist()
    this.getGrouplist()

  },
  methods: {
    // 获取员工列表
    async getSystemadminlist(){
      const res = await getgroupuser()
      this.grouplistBackup=res.data
      this.grouplistBackup.forEach(item => {
          if (item.govlist != null) {
              // 即：this.digui(item);在这地方添加的
              item.govlist.forEach(items => {
                  // 下面的就是执行递归的方法，因为我是从第二层才开始需要往下挖的，所以这里多了个forEach,如果从第一层起，从item就好了，即：this.digui(item);在上面添加
                  this.digui(items); // 这里是源头，把一个对象开始递归，开始循环
                  // 如果想看完整数据，那么是在这里打印数据哦
                  console.log(items, '看我查看完整的数据哦')
                  // 因为上一步递归时，就已经把循环children的动作做完了，这里是验收递归方法的地方。
              })
          } else {
              item.govlist=item.child
              // 如果第一层没有子项做的操作。。。。。
          }
      })
      console.log(this.grouplistBackup)
    },
    // 获取部门
    async getGrouplist(){
      const res = await getgroupdepartmap()
      this.grouplist=res.data

    },
    // 获取考核纬度列表
    async getDutyclasslist(){
       const res = await dutyclasslist(this.searchList)
       this.dutyclasslist=res.data.list
    },
    //删除操作
    async deleteOperate(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          this.deleFrom.state=3;
          this.deleFrom.outid=row.outid;
          const res = await deltarget(this.deleFrom)
          if (res.code === 0) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            
             this.getDataList()
          }
        })
    },
    // 树形结构递归
    digui (item) {
  	  // 一层一层往下面执行，循环，直到不满足情况的条件下，会自动跳出这个递归方法，然后又到上面方法的源头处，开始执行下一个对象。。。
      if (item.govlist != null) {
          // 因为三级联动的数据格式是value和label,所以需要自己手动添加，没有的忽略。
          item.govlist.forEach(ff => {
          	  // 这里就是判断他的children下面还有没有值，有的话我就要往下挖，就又开始自己调用自己了
              this.digui(ff)
          })
      }  else {
      	   // 这里就是判断，如果我这一层的children下面没有东西的时候该做什么操作 
           // 要添加value和label,否则会看不到标签名字和值
          // --------------------------分割线---------------------------------
          
          item.govlist=item.child
          
      }
      // 到这里为止，不能在这里打印数据，不然数据就是个断层的，因为在这里打印的数据是当前循环的这一层的数据，如果想看完整数据效果，那么就需要在递归方法第一次调用的地方打印需要递归的值，即上一个方法中。
  },
    // 新增按钮
    showAdd(){
      this.dialogFormVisible=true;
      console.log(this.dialogFormVisible)
    },
    // 编辑按钮
    async showEdit(row){
      this.editFrom.outid=row.outid
      const res = await gettargetinfo(this.editFrom)
      this.editAdd = res.data
      console.log("this.editAdd")
      console.log(this.editAdd)
      this.editDialogFormVisible=true;

    },
    // 开关状态监听
   async changeVal(val,id){
       console.log(val)
      this.switchFrom.outid=id
      if (val==1) {
        this.switchFrom.state=1;
        const res = await deltarget(this.switchFrom)
                if (res.code === 0) {
                  this.$message({
                    type: 'success',
                    message: '修改状态成功',
                    showClose: true
                  })
                  this.getDataList()
                }
      } else {
        this.switchFrom.state=2;
        const res = await deltarget(this.switchFrom)
                if (res.code === 0) {
                  this.$message({
                    type: 'success',
                    message: '修改状态成功',
                    showClose: true
                  })
                  this.getDataList()
                }
      }
    },
    // 重置搜索条件
    onReset() {
      this.searchInfo = {}
    },
    // 条件搜索
    onSubmit() {
      this.searchInfo.page = 1
      this.searchInfo.pagesize = 10
      this.getDataList()
    },
    // 日期时间戳转日期格式
    formatDate(nS) {     
      return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');     
    },
   
    // 提交按钮
    async enterDialog(){
      
      this.$refs.addForm.validate(async valid => {
        if (valid) {
          if(this.form.relevantdepartments!=null){
           this.form.relevantdepartments=this.form.relevantdepartments.map(String)
          }
           this.form.cycleattr =parseInt(this.form.cycleattr)
          const res = await addtarget(this.form)
          if (res.code === 0) {
                  this.$message({
                    type: 'success',
                    message: '添加成功',
                    showClose: true
                  })
                }
          this.getDataList();
          this.closeDialog();
        }
      })
    },

    // 编辑提交按钮
    async editEnterDialog(){
      this.$refs.editForm.validate(async valid => {
        if (valid) {
          if(this.editAdd.relevantdepartmentsmap!=null){
            this.editAdd.relevantdepartments=this.editAdd.relevantdepartmentsmap.map(String)
          }
          if(this.editAdd.relevantdepartmentsmap==null){
            this.editAdd.relevantdepartments=this.editAdd.relevantdepartments.split(',')
          }
          if(this.editAdd.visiblerangedepartmap==null){
            this.editAdd.visiblerange=this.editAdd.visiblerange.split(',')
          }
          if(this.editAdd.visiblerangegroupmap==null){
            this.editAdd.visiblerangegroup=this.editAdd.visiblerangegroup.split(',')
          }
            console.log(this.editAdd.relevantdepartments)
            if (this.editAdd.share==1) {
              this.editAdd.relevantdepartments=[]
              this.editAdd.relevantdepartmentsmap=[]
              this.$delete(this.editAdd,'relevantdepartments')
              this.$delete(this.editAdd,'relevantdepartmentsmap')
            }
            this.editAdd.report=this.editAdd.reportmap
            this.editAdd.dimension=this.editAdd.dimensionidstr;
            this.editAdd.cycleattr =parseInt(this.editAdd.cycleattr)
          const res = await eitetarget(this.editAdd)
          if (res.code === 0) {
                  this.$message({
                    type: 'success',
                    message: '编辑成功',
                    showClose: true
                  })
                }
          this.getDataList();
          this.editCloseDialog();
        }
      })
    },
    // 添加框关闭
    closeDialog() {
      console.log("closeDialog")
      this.initForm()
      this.dialogFormVisible = false
    },
    // 修改框关闭
    editCloseDialog() {
      this.editInitForm()
      this.editDialogFormVisible = false
    },
    // 添加重置表单
    initForm() {
      console.log("initForm")
      this.$refs.addForm.resetFields()
      this.form = {}
      console.log(this.form)
    },
    // 修改重置表单
    editInitForm() {
      this.$refs.editForm.resetFields()
      this.editAdd = {}
    },
    // 改变pageSize
    handleSizeChange(val) {
      this.searchInfo.pagesize=val
      this.getDataList(this.searchInfo)
    },
    // 改变page
    handleCurrentChange(val) {
      this.searchInfo.page=val
      this.getDataList(this.searchInfo)
    },
    // 获取初始数据
    async getDataList() {
      if(this.searchInfo.relevantdepartments!=null){
           this.searchInfo.relevantdepartments=this.searchInfo.relevantdepartments.map(String)
          }
      const res = await gettarget(this.searchInfo)
      this.tableData = res.data.list
      this.total = res.data.total
      this.searchInfo.page = res.data.page
      this.searchInfo.pagesize = res.data.pageSize
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
