<template>
  <el-container class="">
    <el-header height="20px">
      <el-page-header @back="handleBack" :content="content"> </el-page-header>
    </el-header> 
    <div class="line">
      <el-divider></el-divider>
      <h4>限定条件</h4>
      <el-divider></el-divider>
    </div>
    <el-main v-if="!id">
      <el-row v-if="conditionBox.length">
        <el-row :gutter="50">
          <el-col :xs="24" :sm="24" :lg="24" class="mgb" v-for="(item, index) in conditionBox" :key="index">
            <h5 v-if="index == 0">限定机型</h5>
            <h5 v-if="index > 0">配提机型</h5>
            <el-row>
              <el-row class="pdt">
                <el-button type="primary" size="mini" @click=";(VisibleModle = true), getMaterialLists(index)"
                  >添加机型</el-button
                >

                <el-button type="primary" size="mini" @click="handleDeleteRow(index)">删除机型</el-button>
              </el-row>
              <el-row class="table">
                <el-table
                  v-loading="listLoadingArr[`listLoading${index}`]"
                  style="width: 100%"
                  :data="item"
                  border
                  @select="hanleSelectAll($event, index)"
                  @select-all="hanleSelectAll($event, index)"
                >
                  <el-table-column type="selection" width="55" align="left"> </el-table-column>
                  <el-table-column label="产品名称" width="300" show-overflow-tooltip align="left" prop="materialName">
                    <template slot-scope="scope">
                      <CopyButton :copyText="scope.row.materialName" />
                      <span>{{ scope.row.materialName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="specification" show-overflow-tooltip label="规格型号" align="left">
                    <template slot-scope="scope">
                      <CopyButton :copyText="scope.row.specification" />
                      <span>{{ scope.row.specification }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-form label-width="120px" :inline="false" size="mini">
            <el-row>
              <el-form-item label="配置比例设置"> </el-form-item>
            </el-row>
            <el-col :xs="24" :sm="8" :lg="8">
              <el-form-item label="限定机型">
                <el-input size="mini" v-model="limit"></el-input>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="8" :lg="8" v-for="(len, index) in conditionBox.length - 1">
              <el-form-item :label="'配提' + (index + 1) + '比例'">
                <el-input size="mini" v-model="popArr['line_' + index]"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <el-divider></el-divider>
      </el-row>
    </el-main>
    <el-main v-else>
      <el-row>
        <el-row :gutter="50">
          <el-col :xs="24" :sm="24" :lg="24" class="mgb" v-for="(item, index) in conditionBoxs" :key="index">
            <h5 v-if="index == 0">限定机型</h5>
            <h5 v-if="index > 0">配提机型</h5>
            <el-row>
              <el-row class="table">
                <el-table style="width: 100%" :data="item" border>
                  <el-table-column type="selection" width="55" align="left" v-if="!id"> </el-table-column>
                  <el-table-column type="index" label="序号" width="55" align="left" v-else> </el-table-column>
                  <el-table-column label="产品名称" width="300" align="left" prop="materialName">
                    <template slot-scope="scope">
                      <CopyButton :copyText="scope.row.materialName" />
                      <span>{{ scope.row.materialName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="specification" label="规格型号" show-overflow-tooltip align="left">
                    <template slot-scope="scope">
                      <CopyButton :copyText="scope.row.specification" />
                      <span>{{ scope.row.specification }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
            </el-row>
          </el-col>
        </el-row>
        <el-row v-if="conditionBoxs.length">
          <el-form label-width="120px" :inline="false" size="mini">
            <el-row>
              <el-form-item label="配置比例设置"> </el-form-item>
            </el-row>
            <el-col :xs="24" :sm="8" :lg="8">
              <el-form-item label="限定机型">
                <el-input size="mini" v-model="limit" :readonly="!id ? false : true"></el-input>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="8" :lg="8" v-for="(len, index) in conditionBoxs.length - 1">
              <el-form-item :label="'配提' + (index + 1) + '比例'">
                <el-input size="mini" :readonly="!id ? false : true" v-model="popArr['line_' + index]"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
          <el-col class="text_rihgt" v-if="false">
            <el-button type="primary" size="mini" @click="">添加限定条件</el-button></el-col
          >
        </el-row>
        <el-divider></el-divider>
      </el-row>
    </el-main>
    <el-footer height="100px" v-if="!id">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :lg="12" :offset="0">
          <el-button type="primary" size="mini" @click="handleSubmit">保存</el-button>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12" :offset="0" class="tr">
          <el-button type="primary" size="mini" @click="hanleAddModel">添加</el-button>
          <el-button type="primary" size="mini" @click="handleresale">重置</el-button>
        </el-col>
      </el-row>
    </el-footer>
    <el-dialog
      :visible.sync="VisibleModle"
      append-to-body
      width="80%"
      center
      @close="handleClose"
      :close-on-click-modal="false"
    >
      <div>
        <el-container>
          <el-header height="">
            <el-form label-width="0" :inline="false" size="mini">
              <el-col :xs="24" :sm="10" :lg="10" :offset="0">
                <el-form-item label="">
                  <el-input v-model="saleTypeCode" placeholder="类型编号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="10" :lg="10" :offset="1">
                <el-form-item label="">
                  <el-button type="primary" size="mini" @click="getMaterialLists(arrIndex)">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-header>
          <el-main height="">
            <el-row>
              <el-row :gutter="50">
                <el-col :xs="10" :ms="10" :lg="10">
                  <el-row>
                    <el-row> </el-row>
                    <el-row class="table">
                      <el-row class="title"> 可选产品列表 </el-row>
                      <el-table
                        ref="multipleTable"
                        style="width: 100%"
                        :data="conditList"
                        border
                        height="400"
                        @select-all="handleSelectionAllChange"
                        @selection-change="handleSelectionChange"
                      >
                        <el-table-column type="selection" width="55" :selectable="selectable" align="left">
                        </el-table-column>
                        <el-table-column
                          label="产品编码"
                          prop="materialNumber"
                          min-width="160"
                          show-overflow-tooltip
                          align="left"
                        >
                          <template slot-scope="scope">
                            <CopyButton :copyText="scope.row.materialNumber" />
                            <span>{{ scope.row.materialNumber }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="materialName"
                          label="产品名称"
                          min-width="160"
                          show-overflow-tooltip
                          align="left"
                        >
                          <template slot-scope="scope">
                            <CopyButton :copyText="scope.row.materialName" />
                            <span>{{ scope.row.materialName }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="specification"
                          label="产品型号"
                          min-width="300"
                          show-overflow-tooltip
                          align="left"
                        >
                          <template slot-scope="scope">
                            <CopyButton :copyText="scope.row.specification" />
                            <span>{{ scope.row.specification }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="price"
                          label="产品价格"
                          min-width="160"
                          show-overflow-tooltip
                          align="right"
                        >
                        </el-table-column>
                      </el-table>
                      <el-row class="mg">
                        <div>
                          <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-size.sync="mySize"
                            :page-sizes="[10, 20, 30, 50]"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="listTotal"
                          />
                        </div>
                      </el-row>
                    </el-row>
                  </el-row>
                </el-col>
                <el-col :xs="4" :ms="4" :lg="4" class="middle">
                  <el-row :gutter="20" justify="center" align="middle">
                    <el-row class="btn">
                      <el-button type="primary" size="small " @click="handleAllAdd" :disabled="type == 2"
                        >全部添加</el-button
                      >
                    </el-row>
                    <el-row class="btn">
                      <el-button type="primary" size="small " @click="handleAdd" :disabled="type == 2">增加</el-button>
                    </el-row>
                    <el-row class="btn">
                      <el-button type="primary" size="small " @click="handleDelete" :disabled="type == 1"
                        >删除</el-button
                      ></el-row
                    >
                    <el-row class="btn"
                      ><el-button :disabled="type == 1" type="primary" size="small  " @click="handleAllDelete"
                        >全部删除</el-button
                      ></el-row
                    >
                  </el-row>
                </el-col>
                <el-col :xs="10" :ms="10" :lg="10">
                  <el-row>
                    <el-row> </el-row>
                    <el-row class="table">
                      <el-row class="title"> 已选产品列表 </el-row>
                      <el-table
                        style="width: 100%"
                        :data="conditList2"
                        @select-all="handleSelectionAllChange2"
                        @selection-change="handleSelectionChange2"
                        border
                        height="400"
                      >
                        <el-table-column type="selection" width="55" align="left"> </el-table-column>
                        <el-table-column
                          label="产品编码"
                          prop="materialNumber"
                          min-width="160"
                          show-overflow-tooltip
                          align="left"
                        >
                          <template slot-scope="scope">
                            <CopyButton :copyText="scope.row.materialNumber" />
                            <span>{{ scope.row.materialNumber }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="materialName"
                          label="产品名称"
                          min-width="160"
                          show-overflow-tooltip
                          align="left"
                        >
                          <template slot-scope="scope">
                            <CopyButton :copyText="scope.row.materialName" />
                            <span>{{ scope.row.materialName }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="specification"
                          label="产品型号"
                          min-width="300"
                          show-overflow-tooltip
                          align="left"
                        >
                          <template slot-scope="scope">
                            <CopyButton :copyText="scope.row.specification" />
                            <span>{{ scope.row.specification }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="price"
                          label="产品价格"
                          min-width="160"
                          show-overflow-tooltip
                          align="right"
                        >
                        </el-table-column>
                      </el-table>
                      <el-row class="mg">
                        <!-- <Pagination /> -->
                      </el-row>
                    </el-row>
                  </el-row>
                </el-col>
              </el-row>
            </el-row>
          </el-main>
        </el-container>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="
            VisibleModle = false
            handleClose()
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="handleDiaSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import {
  addPoliyCondition,
  getConditionMaterialDetail,
  getConditionMaterialList,
  getMaterialList
} from '@/api/policy_list'
import TabelTransfer from './TabelTransfer.vue'

import { mapState } from 'vuex'
import AddModel from './AddModel'
import Minxin from '@/mixin'

export default {
  mixins: [Minxin],
  props: {
    id: {
      type: String,
      default: ''
    },
    policyId: {
      type: String,
      default: ''
    },
    isShow:{
      type: Number,
    },
    isFlag:{
      type: [Number,String],
    },
    isEdit:{
      type: [Number,String],
    },
    isCondition:{
      type: [Number,String],
    },
    code:{
      type: [Number,String],
    },
  },
  watch: {
    conditList: {
      handler(newValue, oldValue) {
        this.conditList = newValue
      },
      immediate: true,
      deep: true
    },
    conditList2: {
      handler(newValue, oldValue) {
        this.conditList2 = newValue
      },
      immediate: true,
      deep: true
    }
  },

  data() {
    return {
      base: {
        id: null,
        policyConditionMaterials: [
          {
            id: null,
            materialId: '',
            materialName: '',
            materialNumber: '',
            policyConditionId: '',
            policyId: '',
            policyMaterialId: '',
            popType: 0,
            specification: '',
            walletType: ''
          }
        ],
        policyId: '',
        policyName: '',
        pop: ''
      },
      limit: '',
      VisibleModle: false,
      conditionBox: [[], []],
      conditionBoxs: [],
      multipleSelection: [],
      searchForm: {
        code: ''
      },
      pop: '',
      conditList: [],
      leftData: [],
      rightData: [],
      conditList2: [],
      type: '',
      saleTypeCode: '',
      arrIndex: 0,
      pageSize: 10,
      popArr: {},
      fang: false,
      newConditionBox: [],
      currentPage: 1,
      edit: '',
      mySize: 10,
      listLoadingArr: {}
    }
  },
  created() {
    this.getCommonApi()
  },

  computed: mapState({
    comCode: state => state.sales.code,
    content() {
      const textArr = ['新增条件', '编辑条件', '条件详情']
      const isShow = this.isShow - 2
      let len = isShow ? 2 : isShow
      return textArr[len]
    }
  }),
  methods: {
    getList() {},
    handleBack() {
      const isShow = this.isShow
      if ([4, 5].includes(isShow)) {
        this.$emit('back')
      } else {
        this.$emit('back')
        Object.assign(this.$data, this.$options.data())
      }
    },
    /**
     * 根据条件禁用行复选框
     * 函数返回值为false则禁用选择(反之亦然)
     * @param {Object} row - 行数据
     * @param {String} index - 索引值
     * @return Boolean
     */
    selectable: function (row, index) {
      // row.disabled == undefined 才能被选中
      if (row.disabled == undefined) {
        return true
      }
      // 函数必须有返回值且是布尔值
      // 页面刷新后该函数会执行 N 次进行判断(N 为表格行数)
      // 如果没有返回值则默认返回false(全部无法选中)
    },
    async getCommonApi(policyId, id) {
      if (id) {
        this.id = id
      }

      console.log(555, policyId)
      if (this.id || policyId) {
        if (policyId) {
          this.edit = 'eidt'
        }
        console.log(this.policyId, policyId, this.id)
        const res = await getConditionMaterialDetail({
          id: this.policyId || policyId || this.id
        })
        console.log()
        this.pop = res.data.pop
        let pop = res.data.pop.split(':')
        this.conditionBox = []
        for (let i = 0; i < pop.length; i++) {
          if (i == 0) {
            this.limit = pop[i]
            continue
          }
          this.$set(this.popArr, `line_${i - 1}`, pop[i])
          this.$set(this.listLoadingArr, `listLoading${i}`, false)
        }

        for (let k = 0; k < pop.length; k++) {
          this.listLoadingArr[`listLoading${k}`] = true
          const { data } = await getConditionMaterialList({
            pageNum: 1,
            pageSize: -1,
            policyConditionId: res.data.id,
            popType: k + 1
          })
          if (policyId) {
            this.conditionBox.push(data.records)
          } else {
            this.conditionBoxs.push(data.records)
          }
          this.listLoadingArr[`listLoading${k}`] = false
        }
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    hanleAddModel() {
      this.conditionBox.push([])
    },
    handleSubmit() {
      var tableData = []

      this.newConditionBox.push(JSON.parse(JSON.stringify(this.conditionBox)))
      for (let i = 0; i < this.conditionBox.length; i++) {
        for (let j = 0; j < this.conditionBox[i].length; j++) {
          this.conditionBox[i][j].popType = i + 1
          this.conditionBox[i][j].policyId = this.code || this.comCode
          this.conditionBox[i][j].id = ''
          //  this.conditionBox[i][j].policyMaterialId =this.conditionBox[i][j].materialId
        }
        tableData = [...tableData, ...this.conditionBox[i]]
      }

      if (!tableData.length) {
        this.$errorMsg('请选择机型')
        return
      }
      var pop = [this.limit]
      for (const key in this.popArr) {
        pop.push(this.popArr[key])
      }
      console.log(pop.join(':'))
      const params = {
        id: '',
        policyConditionMaterials: tableData,
        policyId: this.code || this.comCode,
        policyName: '',
        pop: pop.join(':')
      }
      addPoliyCondition(params).then(res => {
        this.$successMsg('添加成功')

        this.conditionBox = [[], []]
        this.conditionBoxs = []
        this.limit = ''
        this.pop = ''
        this.popArr = {}
        this.isFlag = 1
        // Object.assign(this.$data, this.$options.data());
        this.$emit('back')
        this.$emit('handleSubmitCon', this.code || this.comCode)
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    // 筛选全部数据
    hanleSelectAll(selection, index) {
      this.arrIndex = index
      this.ids = selection.map(k => {
        return k.id
      })
      console.log(this.ids)
    },
    handleDeleteRow(index) {
      if (this.arrIndex == index && this.ids.length) {
        var arr = []
        for (var i = 0; i < this.conditionBox[index].length; i++) {
          if (this.ids.indexOf(this.conditionBox[index][i].id) == -1) {
            arr.push(this.conditionBox[index][i])
          }
        }
        this.conditionBox[index] = []
        this.$set(this.conditionBox, index, arr)
        this.$refs.multipleTable.clearSelection()
      }
    },
    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getMaterialLists(this.arrIndex)
    },
    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getMaterialLists(this.arrIndex)
    },
    // 更改列表当前页
    handleTableCurrentChange(val) {
      this.currentPage = val
      this.getMaterialLists(this.arrIndex)
    },
    getMaterialLists(index) {
      this.arrIndex = index
      getMaterialList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        saleTypeCode: this.saleTypeCode,
        policyId: this.code || this.comCode
      }).then(res => {
        let datas = []

        for (let j = 0; j < this.conditionBox.length; j++) {
          datas = [...datas, ...this.conditionBox[j]]
        }

        /**
         * @value newConditionBox 首页保存的所有选中者，即条件1
         * @value res.data.records，this.conditList 每次点击添加获取的最新数据
         * @value disabled 添加条件都进行比较上一个条件或者所有条件当中的限定机型和配提机型，
         * 如：上一个或者所有条件中已经存在disabled
         */
        if (this.newConditionBox.length) {
          this.conditList = res.data.records
          if (this.conditionBox[index].length) {
            for (let n = 0; n < this.newConditionBox.length; n++) {
              for (let m = 0; m < this.newConditionBox[n].length; m++) {
                if (m == index) {
                  this.$set(this.newConditionBox[n], m, [...this.conditionBox[index], ...this.newConditionBox[n][m]])
                  console.log(this.newConditionBox, 'newenewnwn')
                }
              }
            }
          }

          for (let j = 0; j < this.newConditionBox.length; j++) {
            for (let o = 0; o < this.newConditionBox[j].length; o++) {
              if (o == index) {
                for (let i = 0; i < res.data.records.length; i++) {
                  for (let k = 0; k < this.newConditionBox[j][o].length; k++) {
                    if (this.newConditionBox[j][o][k].id == res.data.records[i].id) {
                      res.data.records[i].disabled = true
                    }
                  }
                }
              } else {
                this.conditList = res.data.records
              }
            }
          }
          this.conditList = res.data.records
        } else {
          const newData = datas
          if (newData.length) {
            for (let i = 0; i < res.data.records.length; i++) {
              for (let k = 0; k < newData.length; k++) {
                if (newData[k].id == res.data.records[i].id) {
                  res.data.records[i].disabled = true
                }
              }
            }
          }
          this.conditList = res.data.records
          this.listTotal = res.data.total
        }
      })
    },
    handleSelectionAllChange(e) {
      this.leftData = e
      this.type = 1
    },
    handleSelectionChange(e) {
      this.leftData = e
      this.type = 1
    },
    handleSelectionAllChange2(e) {
      this.rightData = e
      this.type = 2
    },
    handleSelectionChange2(e) {
      this.rightData = e
      this.type = 2
    },
    handleAllAdd() {
      this.conditList2 = this.leftData
      this.leftData = []
      this.$refs.multipleTable.clearSelection()
    },
    handleAllDelete() {
      this.conditList2 = []
    },
    //
    handleAdd() {
      this.conditList2 = [...new Set([...this.conditList2, ...this.leftData])]
      this.$refs.multipleTable.clearSelection()
    },
    //去掉相同数据
    resArr(arr1, arr2) {
      return arr1.filter(v => arr2.every(val => val.id != v.id))
    },
    handleDelete() {
      if (this.type == 2) {
        this.conditList2 = this.resArr(this.conditList2, this.rightData)
        this.rightData = []
      }
    },
    handleDiaSubmit() {
      if (this.conditList2.length) {
        for (let i = 0; i < this.conditionBox.length; i++) {
          if (i == this.arrIndex) {
            this.$set(this.conditionBox, i, [...this.conditList2, ...this.conditionBox[i]])
          }
        }
        this.mySize = 10
        this.currentPage = 1
        this.pageSize = 10
        this.VisibleModle = false
        this.conditList2 = []
      } else {
        this.$errorMsg('请选择内容')
      }
    },
    handleClose() {
      this.mySize = 10
      this.currentPage = 1
      this.pageSize = 10
    },
    handleresale() {
      Object.assign(this.$data, this.$options.data())
    }
  },
  components: {
    AddModel,
    TabelTransfer
  }
}
</script>

<style lang="scss" scoped>
.line {
  margin: 0 20px;
}
.mgb {
  margin-bottom: 20px;
}
.pdt {
  padding-bottom: 20px;
}
.text_rihgt {
  text-align: right;
}
.header {
  margin-bottom: 40px;
}
.el-main {
  overflow: hidden;
}
.btn {
  margin: 20px 0;
  text-align: center;
}
.query_btn {
  margin-left: 0;
}
.mg {
  margin: 20px;
}
.pdt {
  margin: 20px 0;
}
.el-main {
  overflow: hidden;
}
.middle {
  height: 430px;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.title {
  padding: 10px 0;
  text-align: center;
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  border-top: 1px solid #ebeef5;
}
</style>
