<template>
  <section>
    <div class="boxButton">
      <el-button type="primary" size="small" @click="adddepart()">添加部门</el-button>
      <el-button type="primary" size="small" @click="addarea()" :disabled="disabledarea">关联区域</el-button>
      <el-button type="default" size="small" @click="deletelist()" :disabled="disabledarea">删除部门</el-button>
    </div>
    <div class="boxtable">
      <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%;overflow: auto;" :max-height='200'
        size="mini" :highlight-current-row="true" @selection-change="handleSelectionChange" :key="tableKey"
        :header-cell-style="{ fontWeight: 'bold' }">
        <el-table-column type="selection" width="55" />
        <el-table-column label="部门名称" prop="name" min-width="150" />
        <el-table-column label="类型" min-width="150">
          <template slot-scope="scope">
            <el-select placeholder="请选择" v-model="scope.row.type" size="mini">
              <el-option label="比例" :value="1"></el-option>
              <el-option label="固定" :value="2"></el-option>
              <el-option label="自留" :value="3"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="部门绩效" prop="ratio" min-width="170">
          <template slot-scope="scope">
            <el-input-number v-model.number="scope.row.ratio" size="small" type="number" :min="0" :max="scope.row.type === 1?100:9999999999999"/>{{scope.row.type === 1 ? '%' : '元'}}
          </template>
        </el-table-column>
        <el-table-column label="关联区域" prop="regionListRegionName" min-width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.regionListRegionName }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <departdialog v-if="visible" :visible.sync="visible" @channelpop="channelpop"></departdialog>
    <areadialog v-if="visiblearea" :visible.sync="visiblearea" :multipleSelection="multipleSelection"
      @areaMultipleSelection="areaMultipleSelection"></areadialog>
  </section>
</template>
<script>
import channeldialog from '../component/channeldialog';
import areadialog from '../component/areadialog';
import departdialog from '../component/departdialog';

export default {
  data() {
    return {
      listLoading: false,
      visible: false,
      visiblearea: false,
      tableData: {
        data: [],
        total: 0,
      },
      configChannelList: [],
      disabledarea: true,//默认关联区域禁用
      tableKey: Math.random(),//列表刷新
    }
  },
  components: {
    channeldialog,
    areadialog,
    departdialog
  },
  methods: {
    adddepart() {
      this.visible = true
    },
    addarea() {
      this.visiblearea = true
    },

    // 全选
    handleSelectionChange(val) { 
      console.log(val)
      if (val.length) {
        this.disabledarea = false
      } else {
        this.disabledarea = true
      }
      this.multipleSelection = val;
      this.multipleSelection.map((item) => {
        item.regionList.length ? null : item.regionList = [];
      });
    },
    channelpop(departlistArr) {
      if (departlistArr.length) {
        departlistArr.forEach(item => {
          this.$set(item, 'name', item.deptName)
          this.$set(item, 'regionList', [])
          this.$set(item, 'ratio', '')
        });
        this.tableData.data.unshift(...departlistArr)
      }
      this.tableKey = Math.random()//在tableData赋值的地方，顺便随机设置下key，页面就会刷新了
      this.disabledarea = true
    },
    areaMultipleSelection(val) {
      console.log(val)
      this.tableData.data.forEach(item => {
        val.forEach((its) => {
          if (item.index == its.index) {
            item = its
          }
        })
      })
      this.tableData.data.forEach(item => {
        item.regionListRegionName = ''
        item.regionList.forEach(its => {
          item.regionListRegionName += its.regionName + ','
        })
        if (item.regionListRegionName.length) {
          item.regionListRegionName = item.regionListRegionName.substring(0, item.regionListRegionName.lastIndexOf(','))//去掉最后一个逗号
        }
      })
      this.tableKey = Math.random(); //在tableData赋值的地方，顺便随机设置下key，页面就会刷新了
      this.disabledarea = true
    },
    deletelist() {
      this.multipleSelection.forEach(its => {
        let i = this.tableData.data.findIndex(item => item.id === its.id);
        this.tableData.data.splice(i, 1);
      });
      this.tableKey = Math.random()//在tableData赋值的地方，顺便随机设置下key，页面就会刷新了     
    }
  }
}
</script>
<style scoped lang="scss">
.boxtable {
  margin-top: 10px;
}
</style>