<template>
  <section>
    <div class="boxButton">
      <el-button type="primary" size="small" @click="addchannel()">关联渠道商</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.channelType"  size="mini">
              <el-option label="业务渠道" :value="1"></el-option>
              <el-option label="区域渠道" :value="2"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <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="calculateRatio" min-width="170">
          <template slot-scope="scope">
            <el-input-number v-model.number="scope.row.calculateRatio" size="small" type="number" :min="0" :max="100" />%
          </template>
        </el-table-column>
        <el-table-column label="结果" prop="calculateRatio" min-width="100">
          <template slot-scope="scope">
            {{(scope.row.ratio||0) * (scope.row.calculateRatio||0) / 100}}{{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>
    <channeldialog v-if="visible" :visible.sync="visible" @channelpop="channelpop"></channeldialog>
    <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'
export default {
  data() {
    return {
      listLoading: false,
      visible: false,
      visiblearea: false,
      tableData: {
        data: [],
        total: 0,
      },
      configChannelList: [],
      disabledarea: true,//默认关联区域禁用
      tableKey: Math.random(),//列表刷新
    }
  },
  components: {
    channeldialog,
    areadialog
  },
  methods: {
    addchannel() {
      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(row) {
      this.$set(row, 'name', row.name)
      this.$set(row, 'regionList', [])
      this.$set(row, 'ratio', '')
      this.tableData.data.unshift(row);
      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
      // console.log('this.tableData.data', this.tableData.data)
    },
    deletelist() {
      this.multipleSelection.forEach((el) => {
        let i = this.tableData.data.findIndex(item => item.id === el.id);
        this.tableData.data.splice(i, 1);
      });
      this.tableKey = Math.random()//在tableData赋值的地方，顺便随机设置下key，页面就会刷新了
    }
  }
}
</script>
<style scoped lang="scss">
.boxtable {
  margin-top: 10px;
}
</style>
