<template>
  <div class="app-container">
    <!-- 筛选条件 -->
    <div>
      <Collapse :screen-form="screenForm">
        <template #right_btn>
          <el-button size="mini" @click="resetScreenForm">清空</el-button>
          <el-button size="mini" type="primary" @click="submitScreenForm">搜索</el-button>
        </template>
        <template #search>
          <el-form ref="screenForm" :model="screenForm" label-width="70px" size="mini" label-position="left">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="产品名称" prop="name">
                  <el-input placeholder="请输入产品名称" v-model="screenForm.name"></el-input>
                  <!--
                  <el-select placeholder="请选择产品类别" v-model="screenForm.name">
                  <el-option label="默认" value=""></el-option>
                    <el-option
                      v-for="item in materialLis"
                      :label="item.name"
                      :value="item.name"
                      :key="item.id"
                    ></el-option>
                  </el-select> -->
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="产品型号" prop="type">
                  <el-input placeholder="请输入产品型号" v-model="screenForm.type"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="套机编码" prop="number">
                  <el-input placeholder="请输入套机编码" v-model="screenForm.number"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="产品体积" prop="volume">
                  <el-input placeholder="请输入产品体积" v-model="screenForm.volume"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="外机名称" prop="outsideName">
                  <el-input placeholder="请输入外机名称" v-model="screenForm.outsideName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="外机型号" prop="nickname">
                  <el-input placeholder="请输入外机型号" v-model="screenForm.outsideType"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="外机编码" prop="outsideNumber">
                  <el-input placeholder="请输入内机编码" v-model="screenForm.outsideNumber"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="内机名称" prop="innerName">
                  <el-input placeholder="请输入内机名称" v-model="screenForm.innerName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="内机型号" prop="innerType">
                  <el-input placeholder="请输入内机型号" v-model="screenForm.innerType"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="内机编码" prop="innerNumber">
                  <el-input placeholder="请输入内机编码" v-model="screenForm.innerNumber"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
      </Collapse>
    </div>
    <!-- 按钮 -->
    <div class="btn-group clearfix">
      <div class="fl">
        <el-button
          v-if="$checkBtnRole('add', $route.meta.roles)"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click=";(showDialogForm = true), (type = 1), hanleMachine()"
          >新增</el-button
        >

        <el-popconfirm
          v-if="$checkBtnRole('del', $route.meta.roles)"
          confirm-button-text="好的"
          cancel-button-text="不用了"
          icon="el-icon-info"
          icon-color="red"
          title="内容确定删除吗？"
          @onConfirm="hanleDelete"
        >
          <el-button type="primary" size="mini" icon="el-icon-delete" slot="reference" class="el-popover-left"
            >删除</el-button
          >
        </el-popconfirm>
      </div>
      <div class="fr">
        <el-button type="primary" size="mini">导入</el-button>
        <el-button type="primary" size="mini" @click="handleExport">导出</el-button>
        <!-- <el-button type="primary" @click="hanlePrint" size="mini"
          >打印</el-button
        > -->
      </div>
    </div>
    <div class="mymain-container">
      <!-- 列表 -->
      <div class="table">
        <el-table
          v-loading="listLoading"
          :data="dataList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          @select-all="hanleSelectAll"
          @select="hanleSelectAll"
          stripe
        >
          <el-table-column type="selection" align="left"></el-table-column>
          <el-table-column align="left" label="产品名称" prop="materialName" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <CopyButton :copyText="scope.row.materialName" />
              <span>{{ scope.row.materialName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="产品型号" prop="productModel" min-width="160" show-overflow-tooltip>
            <!--            <template slot-scope="scope">-->
            <!--              <CopyButton :copyText="scope.row.productModel" />-->
            <!--              <span>{{scope.row.productModel}}</span>-->
            <!--            </template>-->
          </el-table-column>
          <el-table-column
            align="left"
            label="套机编码"
            prop="composeNumber"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="right"
            label="体积"
            prop="productVolume"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="内机编码"
            prop="innerMachineNumber"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="外机编码"
            prop="outsideMachineNumber"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="配件1"
            prop="parts1"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="配件2"
            prop="parts2"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="创建人"
            prop="createBy"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="创建时间"
            prop="createTime"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>

          <el-table-column
            align="left"
            label="更新人"
            prop="updateBy"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="更新时间"
            prop="updateTime"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>

          <el-table-column align="center" label="操作" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button
                v-if="$checkBtnRole('edit', $route.meta.roles)"
                type="text"
                class="textColor"
                @click="editFn(scope.row.id, scope.row, scope.$index)"
                >编辑</el-button
              >
              <el-popconfirm
                v-if="$checkBtnRole('del', $route.meta.roles)"
                confirm-button-text="好的"
                cancel-button-text="不用了"
                icon="el-icon-info"
                icon-color="red"
                title="内容确定删除吗？"
                @onConfirm="hanleDelete(scope.row.id)"
              >
                <el-button slot="reference" type="text" class="textColor el-popover-left">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="fr">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listTotal"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog
      title="产品信息"
      :visible.sync="showDialogForm"
      width="70%"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="diaLogForm" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="24" :offset="0">
            <el-form-item label="产品名称">
              <el-select placeholder="选择名称" filterable @change="hanleName" v-model="diaLogForm.materialId">
                <el-option v-for="item in materialLis" :label="item.name" :value="item.id" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="产品型号">
              <el-input v-model="diaLogForm.productModel"></el-input>
            </el-form-item>
            <el-form-item label="套机编码">
              <el-input v-model="diaLogForm.productNumber"></el-input>
            </el-form-item>
            <el-form-item label="产品体积">
              <el-input v-model="diaLogForm.productVolume"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24" :offset="0">
            <el-row type="flex" justify="space-between">
              <el-col :span="20" type="flex">
                <el-form-item label="类型">
                  <el-select v-model="diaLogForm.type" @change="hanleType" filterable placeholder="请选择类型">
                    <el-option
                      v-for="item in DistType"
                      :key="item.dictCode"
                      :label="item.dictValue"
                      :value="item.dictCode"
                    >
                    </el-option>
                  </el-select> </el-form-item
              ></el-col>
              <el-col :span="3" style="text-align: right">
                <el-button type="primary" @click="hanleAddData">+</el-button></el-col
              >
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0" v-for="(item, index) in diaLogForm.items" :key="index">
            <div>
              <el-form-item label="编码">
                <el-select v-model="item.number" placeholder="请选择编码" filterable @change="hanleCode($event, index)">
                  <el-option v-for="item in machineList" :key="item.id" :label="item.number" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="名称" prop="">
                <el-input v-model="item.name" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="型号">
                <el-input v-model="item.model" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="体积">
                <el-input v-model="item.volume" placeholder=""></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click=";(showDialogForm = false), resetInfo()">取 消</el-button>
        <el-button type="primary" @click="hanleInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Mixin from '@/mixin/index'
import { downloadFiles } from '@/utils/util'
import {
  getDistList,
  getMachineLlist,
  getMaterialList,
  getProductAdd,
  getProductDel,
  getProductDetail,
  getProductEdit,
  getProductList
} from '@/api/basic_data/material'

export default {
  mixins: [Mixin],
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      options: [
        {
          value: '选项1',
          label: '1'
        },
        {
          value: '选项2',
          label: '2'
        },
        {
          value: '选项3',
          label: '3'
        },
        {
          value: '选项4',
          label: '4'
        },
        {
          value: '选项5',
          label: '5'
        }
      ],
      diaLogForm: {
        adminCompanyId: null,
        productNumber: '',
        id: null,
        items: [
          {
            id: '',
            innerOutsideMachineId: '',
            machineConfigureId: '',
            parentId: '',
            model: '',
            name: '',
            number: '',
            type: '',
            volume: ''
          }
        ],
        materialId: null,
        productModel: '',
        productVolume: 0,
        type: ''
      },
      showDialogForm: false,
      dataList: [
        {
          name: '新风机',
          number: 'DSAFSAF232312321',
          code: 'DSAFSAF232312321',
          volume: '23M^3',
          inCode: 'DSAFSAF232312321',
          outCode: 'DSAFSAF232312321',
          partsOne: '',
          partsTwo: '',
          create: 'admin',
          createDate: '2022-09-12',
          update: 'admin',
          updateDate: '2022-09-12'
        },
        {
          name: '新风机',
          number: 'DSAFSAF232312321',
          code: 'DSAFSAF232312321',
          volume: '23M^3',
          inCode: 'DSAFSAF232312321',
          outCode: 'DSAFSAF232312321',
          partsOne: '',
          partsTwo: '',
          create: 'admin',
          createDate: '2022-09-12',
          update: 'admin',
          updateDate: '2022-09-12'
        },
        {
          name: '新风机',
          number: 'DSAFSAF232312321',
          code: 'DSAFSAF232312321',
          volume: '23M^3',
          inCode: 'DSAFSAF232312321',
          outCode: 'DSAFSAF232312321',
          partsOne: '',
          partsTwo: '',
          create: 'admin',
          createDate: '2022-09-12',
          update: 'admin',
          updateDate: '2022-09-12'
        },
        {
          name: '新风机',
          number: 'DSAFSAF232312321',
          code: 'DSAFSAF232312321',
          volume: '23M^3',
          inCode: 'DSAFSAF232312321',
          outCode: 'DSAFSAF232312321',
          partsOne: '',
          partsTwo: '',
          create: 'admin',
          createDate: '2022-09-12',
          update: 'admin',
          updateDate: '2022-09-12'
        }
      ],
      screenForm: {
        innerName: '',
        innerNumber: '',
        innerType: '',
        name: '',
        number: '',
        outsideName: '',
        outsideNumber: '',
        outsideType: '',
        type: '',
        volume: ''
      },
      type: null,
      machineList: [],
      machinePei: {
        currentPage: 1,
        pageSize: 10,
        name: '',
        number: '',
        type: '',
        volume: ''
      },
      materialLis: {},
      typeList: [],
      DistType: [],
      isCollapse: true,
      machineConfigureId: ''
    }
  },
  mounted() {
    this.getMaterMacList()
  },
  methods: {
    hanleAddData() {
      this.diaLogForm.items.push({
        id: '',
        innerOutsideMachineId: '',
        machineConfigureId: '',
        parentId: '',
        model: '',
        name: '',
        number: '',
        type: '',
        volume: ''
      })
    },
    getMaterMacList() {
      const params = {
        pageNum: 1,
        pageSize: -1,
        keyword: ''
      }

      getMaterialList(params).then(res => {
        this.materialLis = res.data.records
      })
      const params2 = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        keyword: ''
      }
      getMachineLlist(params2).then(res => {
        this.typeList = res.data.records
      })
    },

    hanleType(e) {
      console.log(e, this.DistType)
      this.getMachineLlist(e)
    },
    getMachineLlist(e) {
      let params2 = {
        pageNum: 1,
        pageSize: -1,
        model: this.machinePei.model,
        name: this.machinePei.name,
        number: this.machinePei.number,
        type: e,
        volume: this.machinePei.volume
      }
      getMachineLlist(params2).then(res => {
        this.machineList = res.data.records
      })
    },
    hanleCode(e, i) {
      console.log(e, 'code')
      this.machineList.find(l => {
        if (l.id == e) {
          this.$set(this.diaLogForm.items, i, {
            id: '',
            machineConfigureId: l.id,
            parentId: '',
            innerOutsideMachineId: l.id,
            model: l.model,
            name: l.name,
            number: l.number || '',
            type: l.type,
            volume: l.volume
          })
        }
      })
    },
    hanleName(e) {
      this.materialLis.find(k => {
        if (k.id == e) {
          this.diaLogForm.productModel = k.specification
          this.diaLogForm.productNumber = k.number
          this.diaLogForm.volume = k.volume
        }
      })
    },
    getList() {
      this.listLoading = true
      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        innerName: this.screenForm.innerName,
        innerNumber: this.screenForm.innerNumber,
        innerType: this.screenForm.innerType,
        name: this.screenForm.name,
        number: this.screenForm.number,
        outsideName: this.screenForm.outsideName,
        outsideNumber: this.screenForm.outsideNumber,
        outsideType: this.screenForm.outsideType,
        type: this.screenForm.type,
        volume: this.screenForm.volume
      }
      getProductList(params).then(res => {
        this.dataList = res.data.records
        this.listTotal = res.data.total
        this.listLoading = false
      })
    },
    editFn(id, row, index) {
      console.log(row, '45465')
      let dateils = null
      this.diaLogForm = {
        ...row,
        items: [
          {
            id: '',
            machineConfigureId: row.id,
            parentId: '',
            innerOutsideMachineId: row.id,
            model: row.model,
            name: row.name,
            number: row.number || '',
            type: row.type,
            volume: row.volume
          }
        ]
      }
      getProductDetail({ id: id }).then(res => {
        dateils = res.data
        console.log(dateils)
        this.diaLogForm.materialId = dateils.materialId
        this.materialLis.find(k => {
          if (k.id == dateils.materialId) {
            console.log(k, '5555')
            this.diaLogForm.productModel = k.specification
            this.diaLogForm.productNumber = k.number
            this.diaLogForm.productVolume = k.volume
          }
        })

        getDistList({ sysDictEnum: 'MACHINE_CONFIGURE' }).then(disType => {
          // disType.data.find((q) => {
          //   if (q.dictCode == dateils.items[0].type) {
          //     this.diaLogForm.type = q.dictCode;
          //     this.getMachineLlist(q.dictCode);
          //     this.machineList.map((l) => {
          //     console.log(l.id == dateils.items[0].machineConfigureId);
          //       if (l.id == dateils.items[0].machineConfigureId) {
          //         this.$set(this.diaLogForm.items, 0, {
          //           id: "",
          //           machineConfigureId: l.id,
          //           parentId: "",
          //           innerOutsideMachineId: l.id,
          //           model: l.model,
          //           name: l.name,
          //           number: l.number || "",
          //           type: l.type,
          //           volume: l.volume,
          //         });
          //         return;
          //       }
          //     });
          //   }
          // });

          this.DistType = disType.data
        })

        //  const machineObj =   this.getMachineLlist(dateils.items[0].type)
        console.log(this.diaLogForm, 'lll')

        this.showDialogForm = true
      })
    },
    hanleInfo() {
      if (this.type === 1) {
        this.diaLogForm.id = null
        this.diaLogForm.adminCompanyId = null
        getProductAdd({ ...this.diaLogForm }).then(res => {
          this.$successMsg('保存成功')
          this.resetInfo()
          this.getList()
        })
      } else if (this.type === 2) {
        const params = { ...this.diaLogForm }
        getProductEdit(params).then(res => {
          this.$successMsg('编辑成功')
          this.resetInfo()
          this.getList()
        })
      }

      this.showDialogForm = false
    },
    hanleDelete(id) {
      this.hanleDeleteAllPromise(id).then(ids => {
        getProductDel({ ids: ids.join(',') }).then(res => {
          this.$successMsg('删除成功')
          this.getList()
        })
      })
    },
    handleExport() {
      let screenData = {
        customerName: this.screenForm.customerName,
        freeDay: this.screenForm.freeDay,
        toll: this.screenForm.toll
      }
      downloadFiles('product-compose/export', screenData)
    },
    resetInfo() {
      this.diaLogForm = {
        id: null,
        composeNumber: '',
        id: '',
        items: [
          {
            id: '',
            innerOutsideMachineId: '',
            machineConfigureId: '',
            parentId: '',
            model: '',
            name: '',
            number: '',
            type: '',
            volume: ''
          }
        ],
        materialId: '',
        orgNumber: 0,
        productModel: '',
        productVolume: ''
      }
    },
    hanleMachine() {
      let params = {
        pageNum: 1,
        pageSize: -1,
        keyword: ''
      }
      getMaterialList(params).then(res => {
        this.materialLis = res.data.records
      })
      getDistList({ sysDictEnum: 'MACHINE_CONFIGURE' }).then(res => {
        console.log(res, 'type')
        this.DistType = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-select {
  width: 100%;
}
</style>
