<template>
  <el-dialog
    :visible.sync="isShow"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    @close="cancelHandle"
    custom-class="variety-set-dialog"
    top="10vh"
    v-dialogDrag
    title="添加其他装置"
		width="1000px"
  >
    <div class="main">
      <el-select
          v-model="searchTxt"
          placeholder="请选择品种"
          style="margin-bottom: 20px;"
          clearable
          @change="getPlantList"
      >
        <el-option
            v-for="item in varietyOptions"
            :key="item.VarietyId"
            :label="item.VarietyName"
            :value="item.VarietyId"
        />
      </el-select>
      <el-table
        :data="plantData"
        border
        :max-height="300"
        empty-text="暂无装置信息"
        @selection-change="selectPlant"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          v-for="item in tableColums"
          :key="item.label"
          :label="item.label"
          :width="item.widthsty"
          :min-width="item.minwidthsty"
          align="center"
        >
          <template slot-scope="{row}">
            <span v-if="item.key==='address'">{{row.Province===row.City?row.City:row.Province+row.City}}</span>
            <span v-else>{{row[item.key]}}</span>
          </template>
        </el-table-column>
      </el-table>

      <div class="select-cont" v-if="selectPlants.length">
        <el-tag
          v-for="(tag,index) in selectPlants"
          :key="tag.id"
          closable
          @close="removePlant(index)">
            {{tag.name}}
        </el-tag>
      </div>
    </div>
    <div class="dia-bot">
			<el-button type="primary" style="margin-right: 20px" @click="saveHandle">保存</el-button>
			<el-button type="primary" plain @click="cancelHandle('cancel')">取消</el-button>
		</div>
  </el-dialog>
</template>

<script>
import * as supplyApi from '@/api/modules/supplyApi.js';
export default {
  props: {
    isShow: {
      type: Boolean
    },
    plantId: {
      type: Number
    }

  },

  watch: {
    isShow(nval) {
      if(!nval) return

      this.getVarietyList();
    }
  },
  data() {
    return {
      searchTxt: '',
      varietyOptions:[],
      plantData: [],
      tableColums: [
        {
          label: '地点',
          key: 'address',
          minwidthsty: '120px'
        },
        {
          label: '工厂',
          key: 'FactoryName'
        },
        {
          label: '装置/产线',
          key: 'PlantName'
        },
        {
          label: '年产能(万吨)',
          key: 'AnnualCapacity'
        },
      ],

      selectPlants: []
    }
  },

  methods: {

    /* 获取品种列表 */
    async getVarietyList() {
      const res = await supplyApi.varietyList({
        IsAnalyse: true,
        Keyword: '',
        CurrentIndex: 1,
        PageSize: 10000
      });
      if(res.Ret !== 200) return
      this.varietyOptions = res.Data.List || [];
    },

    async getPlantList() {
      if(this.searchTxt) {
        const res = await supplyApi.plantList({VarietyId: Number(this.searchTxt)});
        if(res.Ret !== 200) return
  
        this.plantData = res.Data.List || [];
      }else {
        this.plantData = []
      }
    },

    /* 选择项 */
    selectPlant(val) {
      console.log(val)
      let ids = this.selectPlants.map(_=>_.id);
      let tag_arr = val.map(item => ({
        name: `${item.FactoryName}${item.PlantName}(${item.AnnualCapacity})`,
        id: item.VarietyPlantId
      })).filter(_ => !ids.includes(_.id))

      this.selectPlants = [...this.selectPlants,...tag_arr];
    },

    /* 移除装置 */
    removePlant(index) {
      this.selectPlants.splice(index,1)
    },

    cancelHandle() {
      this.searchTxt = '';
      this.selectPlants = [];
      this.plantData = [];
      this.$emit('update:isShow',false)
    },
    

    /* 保存 */
    async saveHandle() {
      if(!this.selectPlants.length) return this.$message.warning('请选择要添加的装置')
      let res = await supplyApi.copyOtherPlant({
        VarietyId: Number(this.$route.query.id),
        PrevVarietyPlantId: this.plantId,
        VarietyPlantIdList: this.selectPlants.map(_ =>_.id)
      })

      if(res.Ret !== 200)
      this.$message.success('添加成功')
      this.cancelHandle()
      this.$emit('success')
    },
  }
}
</script>

<style lang="scss" scoped>
.main {
  padding: 0 30px;
  .select-cont {
    padding: 20px;
    margin-top: 20px;
    border: 1px dashed #999;
    display: flex;
    flex-wrap: wrap;
    .el-tag {
      margin: 5px;
    }
  }
}
.dia-bot {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}
</style>