<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      title="选择物料"
      :visible.sync="showTroubleshooting"
      width="80%"
      :loading="loading"
      :close-on-press-escape="false"
      :before-close="handleClose"
      top="6vh"
    >
      <template>
        <div class="materialInformation">
          <div class="left-tree">
            <el-tree
              accordion
              style="height: 100%; overflow-y: scroll"
              :data="treeData"
              :props="defaultProps"
              @node-click="handleNodeClick"
            ></el-tree>
          </div>
          <div class="common-page-shadow">
            <div class="bbsl-table-search">
              <el-form v-model="queryParam" :inline="true">
                <el-form-item label="平台物料编号">
                  <el-input
                    size="small"
                    v-model="querys[5].value"
                    clearable
                    style="width: 120px"
                    placeholder="平台物料编号"
                  ></el-input>
                </el-form-item>
                <el-form-item label="企业物料编号">
                  <el-input
                    size="small"
                    v-model="querys[1].value"
                    clearable
                    style="width: 120px"
                    placeholder="企业物料编号"
                  ></el-input>
                </el-form-item>
                <el-form-item label="物料牌号">
                  <el-input
                    size="small"
                    style="width: 120px"
                    v-model="querys[2].value"
                    clearable
                    placeholder="请输入物料牌号"
                  ></el-input>
                </el-form-item>
                <el-form-item label="规格型号">
                  <el-input
                    size="small"
                    style="width: 120px"
                    v-model="querys[3].value"
                    clearable
                    placeholder="请输入规格型号"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    size="small"
                    type="danger"
                    icon="el-icon-search"
                    @click="handleSearch"
                    >搜索</el-button
                  >
                  <el-button
                    size="small"
                    icon="el-icon-refresh"
                    @click="handleReset"
                    >重置</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
            <el-table
              ref="multipleSelection"
              v-loading="loading"
              border
              size="mini"
              :data="tableData"
              height="400px"
              :row-key="rowKey"
              :style="{width: '100%', height: '500px'}"
              :max-height="tableMaxHeight"
              :cell-style="{'text-align': 'center'}"
              :header-cell-style="{'text-align': 'center'}"
              @selection-change="handleSelectionChange"
              @select="tableSelect"
            >
              <el-table-column
                type="selection"
                width="55"
                :reserve-selection="true"
              />
              <el-table-column type="index" width="55" label="序号" />
              <el-table-column
                prop="matPlatcode"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="平台物料编号"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="matCode"
                show-overflow-tooltip
                min-width="10%"
                v-if="matIfPlat == 0"
                align="center"
                label="企业物料编号"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="matName"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="物料名称"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="matMaterial"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="物料牌号"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="matSpec"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="规格型号"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="matUnit"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="计量单位"
                resizable
              >
              </el-table-column>

              <el-table-column
                prop="matBrand"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="品牌"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="matBaseExt"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="基础扩展"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="matOtherExt"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="其他扩展"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="matIfPlat"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="是否集采"
                resizable
              >
                <template v-slot="{row}">
                  {{ getDictName('cglx-ywlx', row.matIfPlat) }}
                </template>
              </el-table-column>
            </el-table>
            <div style="float: right; margin-top: 10px">
              <el-pagination
                ref="paginationPanel"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryParam.pageBean.page"
                :page-sizes="[20, 30, 40, 50]"
                :page-size="queryParam.pageBean.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="queryParam.pageBean.total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSave">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {TableMixin} from '@/mixins/tableMixin'
import basicData from '@/api/basicData'
export default {
  name: 'CmgtSaftyDangerCheckplanFormDialogTroubleshooting', // 排查计划明细
  props: {
    useOrgList: Array,
  },
  data() {
    return {
      showTroubleshooting: false, // 控制弹层显示与隐藏
      multipleSelection: [],
      loading: false,
      selectedValue: [],
      treeData: [],
      matIfPlat: '',
      defaultProps: {
        children: 'children',
        id: 'code',
        label: 'name',
      },
      querys: [
        {
          group: 'main',
          operation: 'RIGHT_LIKE',
          parentGroup: '',
          property: 'matCategory',
          relation: 'AND',
          value: '',
        },
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'matCode',
          relation: 'AND',
          value: '',
        },
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'matMaterial',
          relation: 'AND',
          value: '',
        },
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'matSpec',
          relation: 'AND',
          value: '',
        },
        {
          group: 'main',
          operation: 'EQUAL',
          parentGroup: '',
          property: 'matStatus',
          relation: 'AND',
          value: '1',
        },
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'matPlatcode',
          relation: 'AND',
          value: '',
        },
      ],
      queryParam: {
        pageBean: {
          page: 1,
          pageSize: 20,
          total: 0,
        },
      },
      url: '',
      currentUser: {},
    }
  },
  mixins: [TableMixin],
  created() {},
  methods: {
    rowKey(row) {
      return row.id
    },

    //搜索
    handleSearch() {
      this.getData()
    },
    //重置
    handleReset() {
      this.querys[0].value = ''
      this.querys[1].value = ''
      this.querys[2].value = ''
      this.querys[3].value = ''
      this.querys[4].value = '1'
      this.querys[5].value = ''
      this.getData()
    },
    //显示弹框
    add(row) {
      this.currentUser = JSON.parse(sessionStorage.getItem('currentUserDetail'))
      this.url = 'bizMaterial/v1/pageCurOrgData'
      this.selectTree()
      this.getData()
      this.showTroubleshooting = true
      this.$nextTick(function () {
        this.useOrgList.forEach((item) => {
          if (this.tableData.some((data) => data.id === item.id)) {
            this.$refs.multipleSelection.toggleRowSelection(item, true) //这样就可以了
          } else {
            this.$refs.multipleSelection.toggleRowSelection(item, true) //这样就可以了
          }
        })
      })
    },
    //树形控价
    handleNodeClick(data) {
      this.querys[0].value = data.code
      this.getData()
    },
    //查询物料分类树结构
    selectTree() {
      this.treeData = []
      this.$http
        .post('${portal}/bizMaterialCategory/v1/getEnterpriseCategoryTree')
        .then((res) => {
          res.data.value.unshift({
            name: '全部',
            code: '',
          })
          let data = res.data.value
          if (this.currentUser.org[0].orgCode == '00001513') {
            data.forEach((item, index) => {
              if (
                item.code == '01' ||
                item.code == '02' ||
                item.code == '03' ||
                item.code == '04' ||
                item.code == '07' ||
                item.code == ''
              ) {
                this.treeData.push(item)
              }
            })
          } else {
            data.forEach((item, index) => {
              if (
                item.code != '01' &&
                item.code != '02' &&
                item.code != '03' &&
                item.code != '04' &&
                item.code != '07'
              ) {
                this.treeData.push(item)
              }
            })
          }
        })
    },
    // 获取list
    getData() {
      this.loading = true
      this.tableData = []
      this.queryParam.querys = []
      if (this.querys[0].value) {
        this.queryParam.querys.push(this.querys[0])
      }
      if (this.querys[1].value) {
        this.queryParam.querys.push(this.querys[1])
      }
      if (this.querys[2].value) {
        this.queryParam.querys.push(this.querys[2])
      }
      if (this.querys[3].value) {
        this.queryParam.querys.push(this.querys[3])
      }
      if (this.querys[4].value) {
        this.queryParam.querys.push(this.querys[4])
      }
      if (this.querys[5].value) {
        this.queryParam.querys.push(this.querys[5])
      }
      this.queryParam.querys.push({
        group: 'main',
        operation: 'EQUAL',
        parentGroup: '',
        property: 'matIfPlat',
        relation: 'AND',
        value: this.matIfPlat,
      })

      this.$http.post('${portal}/' + this.url, this.queryParam).then((res) => {
        console.log(res, 2333333333)
        this.queryParam.pageBean.total = res.data.value.total
        this.tableData = res.data.value.rows
        this.$set(this.tableData)
        this.loading = false
      })
    },
    tableSelect(rows, row) {
      let selected = rows.length && rows.indexOf(row) !== -1
      if (!selected) {
        this.selectedValue = rows
      } else {
        this.selectedValue = []
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 点击关闭按钮
    handleClose() {
      this.$refs.multipleSelection.clearSelection()
      this.showTroubleshooting = false
    },
    // 保存按钮
    handleSave() {
      let list = []
      this.multipleSelection.forEach((item) => {
        list.push(item)
      })
      list = Array.from(new Set(list.map(JSON.stringify)), JSON.parse)
      this.$emit('addDetail', list)
      this.handleClose()
    },
    handleCurrentChange(page) {
      this.queryParam.pageBean = {...this.queryParam.pageBean, page}
      this.getData()
    },
    handleSizeChange(pageSize) {
      this.queryParam.pageBean = {...this.queryParam.pageBean, pageSize}
      this.getData()
    },
  },
}
</script>

<style scoped lang="scss">
.dialog-footer {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.materialInformation {
  display: flex;
  width: 100%;
  height: 100%;
  .common-page-shadow {
    width: calc(100% - 174px);
    height: calc(100% - 160px);
    box-sizing: border-box;
    .common-search-container {
      height: 80px;
    }
  }
  .left-tree {
    width: 200px;
    margin-right: 10px;
    padding: 10px;
    height: 600px;
    box-sizing: border-box;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0.10417vw 0.625vw 0 rgba(0, 0, 0, 0.1);
  }
}
</style>
