<template>
  <ele-modal
    width="40%"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    title="选择门店"
    @update:visible="updateVisible"
  >
    <el-card shadow="never">
      <ele-pro-table
        :datasource="allBiz"
        :columns="columns"
        height="535px"
        :toolkit="[]"
        layout="total, prev, pager, next, jumper"
      >
        <template v-slot:toolbar>
          <el-row :gutter="15">
            <el-col :md="12">
              <regions-select
                v-model="city"
                type="provinceCity"
                placeholder="请选择省市"
                class="ele-fluid"
              />
            </el-col>
          </el-row>
        </template>
        <template v-slot:toolkit>
          <el-button size="mini" class="ele-btn-icon" @click="removeAll">
            移除所有
          </el-button>
          <el-button size="mini" class="ele-btn-icon" @click="addAll">
            全部添加
          </el-button>
        </template>
        <template v-slot:action="{ row }">
          <el-button
            size="mini"
            type="info"
            @click="remove(row)"
            v-if="selectBiz.includes(row.id)"
            >移除</el-button
          >
          <el-button size="mini" type="primary" @click="add(row)" v-else
            >添加</el-button
          >
        </template>
      </ele-pro-table>
    </el-card>
  </ele-modal>
</template>

<script>
  import { pageBiz } from '@/api/biz';
  import RegionsSelect from '@/components/RegionsSelect/index.vue';

  export default {
    components: { RegionsSelect },
    props: {
      // 弹窗是否打开
      visible: Boolean,
      value: {
        type: Array,
        default: () => []
      },
      showBiz: {
        type: [Object, Array],
        default: () => {}
      },
      productId: {
        type: String,
        default: () => {}
      }
    },
    data() {
      return {
        city: [],
        // 加载状态
        loading: false,
        allBiz: [],
        allBizBack: [],
        selectBiz: Object.values(this.value),
        showSelectBiz: { ...this.showBiz },
        columns: [
          {
            prop: 'id',
            label: 'ID',
            width: 80,
            align: 'center'
          },
          {
            prop: 'name',
            label: '门店',
            showOverflowTooltip: true,
            minWidth: 110,
            sortable: 'custom'
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 150,
            align: 'center',
            slot: 'action'
          }
        ]
      };
    },
    computed: {
      // /* 未选择的班级数据 */
      unChooseClass() {
        return this.allBiz.filter((d) => this.selectBiz.indexOf(d.id) === -1);
      }
      // // 是否开启响应式布局
      // styleResponsive() {
      //   return this.$store.state.theme.styleResponsive;
      // }
    },
    created() {},
    methods: {
      /* 获取全部实训班级 */
      query() {
        pageBiz({ productId: this.productId })
          .then((data) => {
            this.allBiz = data;
            this.allBizBack = data;
          })
          .catch((e) => {
            this.$message.error(e.message);
          });
      },
      /* 添加 */
      add(row) {
        this.selectBiz.push(row.id);
        this.showSelectBiz[row.id] = row.name;
      },
      /* 移除 */
      remove(row) {
        this.selectBiz.splice(this.selectBiz.indexOf(row.id), 1);
        this.$delete(this.showSelectBiz, row.id);
      },
      /* 添加全部 */
      addAll() {
        this.unChooseClass.forEach((d) => {
          this.selectBiz.push(d.id);
          this.showSelectBiz[d.id] = d.name;
        });
      },
      /* 移除所有 */
      removeAll() {
        this.selectBiz.splice(0, this.selectBiz.length);
        this.showSelectBiz = {};
      },
      /* 搜索事件 */
      onSearch(where) {
        this.lastWhere = where;
        this.doReload();
      },
      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      }
    },
    watch: {
      visible(visible) {
        if (visible) {
          this.query();
        }
      },
      value(newVal) {
        this.selectBiz = newVal;
      },
      showBiz(newVal) {
        this.showSelectBiz = newVal;
      },
      selectBiz(value) {
        this.$emit('input', value);
        this.$emit('update:showBiz', this.showSelectBiz);
      },
      city(newVal) {
        if (newVal && newVal[1]) {
          let city_id = newVal[1];
          this.allBiz = [];
          this.allBizBack.forEach((biz) => {
            if (parseInt(biz.city_id) === parseInt(city_id)) {
              this.allBiz.push(biz);
            }
          });
        } else {
          this.allBiz = this.allBizBack;
        }
        console.log(this.allBiz);
      }
    }
  };
</script>
<style lang="scss" scoped>
  :deep(.el-dialog__body) {
    padding: 0;
  }
  :deep(.el-card__body) {
    padding: 0;
  }
</style>
