<template>
  <el-dialog :visible="visible" title="选择成员" width="1000px" @close="onCancel">
    <div class="select-clerk">
      <!-- 选择导购 -->
      <div class="clerk-list">
        <!-- 筛选条件 -->
        <div class="search-bar">
          <el-select clearable style="width: 182px"></el-select>
          <el-input placeholder="请输入门店名称" prefix-icon="el-icon-search" clearable style="margin-left: 10px; width: 180px"></el-input>
          <el-input placeholder="请输入导购名称/手机号/code" prefix-icon="el-icon-search" clearable style="margin-left: 10px; width: 250px"></el-input>
        </div>
        <!-- 导购列表的表头 -->
        <el-table :class="['clerk-list-header', { 'hide-empty': storeList.length > 0 }]">
          <el-table-column min-width="67px">
            <el-checkbox v-if="multiple" :disabled="canSelectAll()" slot="header"></el-checkbox>
          </el-table-column>
          <el-table-column label="导购" min-width="230px"></el-table-column>
          <el-table-column label="手机号码" min-width="160px"></el-table-column>
          <el-table-column label="备注" min-width="168px"></el-table-column>
        </el-table>
        <!-- 导购列表 -->
        <div v-if="storeList.length > 0" class="clerk-list-body">
          <div v-for="el in storeList" :key="el.storeId" class="clerk-list-cell">
            <!-- 门店信息 -->
            <el-table :data="[{}]" class="clerk-store-info" :show-header="false">
              <el-table-column min-width="67px">
                <el-checkbox v-if="multiple" :disabled="canSelectStore(el)"></el-checkbox>
              </el-table-column>
              <el-table-column min-width="558px">
                <div class="clerk-store-name">{{ el.storeName }}</div>
                <div class="clerk-store-code">code：{{ el.storeCode }}</div>
              </el-table-column>
            </el-table>
            <!-- 门店下的导购 -->
            <el-table :data="el.clerkList" class="clerk-list-table" :show-header="false">
              <el-table-column min-width="67px">
                <template slot-scope="{ row }">
                  <el-checkbox v-if="multiple" @change="onSelectClerk(row)" :checked="selected.some(item => item.clerkId == row.clerkId)" :disabled="row.hmStatus == 1 || row.hmStatus == 2"></el-checkbox>
                  <el-radio v-else :disabled="row.hmStatus == 1 || row.hmStatus == 2 || row.hmStatus == 3"></el-radio>
                </template>
              </el-table-column>
              <el-table-column label="导购" min-width="230px">
                <template slot-scope="{ row }">
                  <div class="clerk-name">{{ row.clerkName }}</div>
                  <div class="clerk-code">{{ row.clerkCode }}</div>
                </template>
              </el-table-column>
              <el-table-column label="手机号码" prop="phoneNumber" min-width="160px"></el-table-column>
              <el-table-column label="备注" min-width="168px">
                <div slot-scope="{ row }">{{ formatRemark(row.hmStatus) }}</div>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <!-- 选中的导购 -->
      <div class="selected-clerk">
        <div class="selected-clerk-title">
          <span>{{ `已选导购（${selected.length}）` }}</span>
          <el-button v-if="multiple" type="text" @click="onDelAll">全部清除</el-button>
        </div>
        <!-- 选中的导购列表 -->
        <div class="selected-clerk-list">
          <div v-for="(el, index) in selected" :key="el.clerkId" class="clerk-item">
            <div class="clerk-info">
              <div class="clerk-name">{{ el.clerkName }}</div>
              <div class="clerk-code">{{ el.clerkCode }}</div>
            </div>
            <div class="del-btn" @click="onDel(index)">
              <i class="iconfont-hb3 iconclose1 del-btn-icon"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template slot="footer">
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onSave">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'SelectClerk',
  props: {
    visible: Boolean,
    data: {
      type: Array,
      default: () => []
    },
    multiple: {
      type: Boolean,
      default: false
    },
    max: {
      type: Number,
      default: 100
    }
  },
  watch: {
    data() {
      this.selected = JSON.parse(JSON.stringify(this.data));
    }
  },
  data() {
    return {
      storeList: [
        {
          storeId: 'store id',
          storeName: '门店名称',
          storeCode: 'store code',
          clerkList: [
            {
              clerkId: 'clerk id',
              clerkName: '导购名称',
              clerkCode: 'clerk code',
              phoneNumber: '18912341234',
              hmStatus: 3 // 1未关联企微 2关联的企微号未配置客户联系功能  3已有单人活码（单人活码不能创建 多人活码可以）  4无单人活码(可以创建)
            },
            {
              clerkId: 'clerk id1',
              clerkName: '导购名称',
              clerkCode: 'clerk code1',
              phoneNumber: '18912341234',
              hmStatus: 1 // 1未关联企微 2关联的企微号未配置客户联系功能  3已有单人活码（单人活码不能创建 多人活码可以）  4无单人活码(可以创建)
            }
          ]
        },
        {
          storeId: 'store id1',
          storeName: '门店名称',
          storeCode: 'store code',
          clerkList: [
            {
              clerkId: 'clerk id11',
              clerkName: '导购名称',
              clerkCode: 'clerk code',
              phoneNumber: '18912341234',
              hmStatus: 2 // 1未关联企微 2关联的企微号未配置客户联系功能  3已有单人活码（单人活码不能创建 多人活码可以）  4无单人活码(可以创建)
            },
            {
              clerkId: 'clerk id12',
              clerkName: '导购名称',
              clerkCode: 'clerk code1',
              phoneNumber: '18912341234',
              hmStatus: 1 // 1未关联企微 2关联的企微号未配置客户联系功能  3已有单人活码（单人活码不能创建 多人活码可以）  4无单人活码(可以创建)
            }
          ]
        }
      ],
      selected: []
    };
  },
  methods: {
    // 能否全选所有门店下的导购
    canSelectAll() {
      return this.storeList.map(el => this.canSelectStore(el)).every(el => el == true);
    },
    // 能否全选门店下的导购
    canSelectStore(store) {
      return store.clerkList.filter(item => item.hmStatus != 1 && item.hmStatus != 2).length == 0;
    },
    // 解析备注
    formatRemark(status) {
      // 1未关联企微 2关联的企微号未配置客户联系功能  3已有单人活码（单人活码不能创建 多人活码可以）  4无单人活码(可以创建)
      let result;
      switch (Number(status)) {
        case 1:
          result = '未关联企微号';
          break;
        case 2:
          result = '关联的企微号未配置客户联系功能';
          break;
        case 3:
          result = '已有单人活码';
          break;
        // case 4:
        //   result = '';
        //   break;
      }
      return result;
    },
    // 选择单个导购
    onSelectClerk(clerk) {
      const index = this.selected.findIndex(el => el.clerkId == clerk.clerkId);
      index == -1 ? this.selected.push(clerk) : this.selected.splice(index, 1);
    },
    onDelAll() {
      this.selected.splice(0);
    },
    onDel(index) {
      this.selected.splice(index, 1);
    },
    onCancel() {
      this.$emit('update:visible', false);
    },
    onSave() {
      this.$emit('save', JSON.parse(JSON.stringify(this.selected)));
      this.onCancel();
    }
  }
};
</script>

<style lang="scss" scoped>
.select-clerk {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  height: 55vh;
  .clerk-list,
  .selected-clerk {
    border-radius: 4px;
    border: 1px solid #dcdfe6;
  }
  .clerk-list {
    padding: 10px 16px;
    width: 666px;
    box-sizing: border-box;
    .hide-empty {
      >>> .el-table__empty-block {
        display: none;
      }
    }
    .search-bar {
      font-size: 0;
    }
    .clerk-list-header {
      margin-top: 10px;
      >>> .el-table__header th {
        height: 32px !important;
        background-color: #f2f3f5;
        border-bottom: none;
      }
    }
    .clerk-list-body {
      height: calc(100% - 74px);
      overflow-y: auto;
      .clerk-list-cell {
        margin-top: 10px;
        border: 1px solid #e4e7ed;
        border-bottom: none;
        >>> .el-table {
          &::before {
            background-color: #e4e7ed !important;
          }
          .cell {
            padding-left: 10px;
            padding-right: 0;
          }
        }
        .clerk-store-info {
          background: #f7f8fa;
          >>> .el-table__body {
            tr,
            tr:hover > td.el-table__cell {
              background-color: transparent;
            }
            td {
              padding-top: 5px;
              padding-bottom: 5px;
              border: none;
              .cell:empty::before {
                content: '';
              }
            }
          }
          .clerk-store-name {
            font-size: 14px;
            font-weight: 400;
            color: #303133;
            line-height: 20px;
          }
          .clerk-store-code {
            font-size: 12px;
            font-weight: 400;
            color: #606266;
            line-height: 17px;
          }
        }
        .clerk-list-table {
          >>> .el-table__row {
            + .el-table__row {
              border-top: 1px solid #e4e7ed;
            }
            td {
              padding-top: 6px;
              padding-bottom: 6px;
              border-bottom: none;
            }
          }
          .clerk-name {
            font-size: 14px;
            font-weight: 400;
            color: #303133;
            line-height: 20px;
          }
          .clerk-code {
            font-size: 12px;
            font-weight: 400;
            color: #606266;
            line-height: 17px;
          }
        }
      }
    }
  }
  .selected-clerk {
    margin-left: 12px;
    width: 274px;
    .selected-clerk-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 12px 16px 16px;
      font-size: 14px;
      font-weight: 400;
      color: #303133;
      line-height: 20px;
    }
    .selected-clerk-list {
      max-height: calc(100% - 56px);
      overflow-y: auto;
      .clerk-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px 8px 16px;
        &:hover {
          background: #f7f8fa;
        }
        .clerk-info {
          width: calc(100% - 30px);
          font-size: 14px;
          font-weight: 500;
          color: #303133;
          line-height: 20px;
          .clerk-name {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .clerk-code {
            margin-top: 2px;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 400;
          }
        }
        .del-btn {
          width: 20px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          border-radius: 10px;
          cursor: pointer;
          &:hover {
            background: #e5e6eb;
          }
          .del-btn-icon {
            font-size: 16px;
            color: #606266;
          }
        }
      }
    }
  }
}
</style>
