<template>
  <div class="mod-config">
    <el-form :inline="true" label-position="top" :model="searchData">
      <el-form-item :label="'BU'">
        <el-select v-model="searchData.buNo" placeholder="请选择" clearable style="width: 130px">
          <el-option
            v-for = "i in buList"
            :key = "i.buNo"
            :label = "i.buDesc"
            :value = "i.buNo">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="'物料编码'">
        <el-input v-model="searchData.partNo" clearable style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'物料描述'">
        <el-input v-model="searchData.partDesc" clearable style="width: 210px"></el-input>
      </el-form-item>
      <el-form-item :label="'录入时间'">
        <el-date-picker
          style="width: 120px"
          v-model="searchData.startDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item style="margin-top: 23px;">
        <label style="margin-left: 0px;font-size: 19px">&#10142</label>
      </el-form-item>
      <el-form-item :label="' '">
        <el-date-picker
          style="width: 120px"
          v-model="searchData.endDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item :label="' '">
        <el-button @click="searchTable">查询</el-button>
        <!--        <el-button type="primary" @click="delModal()">删除</el-button>-->
        <download-excel
          :fields="fields()"
          :data="exportData"
          type="xls"
          :name="exportName"
          :header="exportHeader"
          :footer="exportFooter"
          :fetch="createExportData"
          :before-generate="startDownload"
          :before-finish="finishDownload"
          worksheet="导出信息"
          class="el-button el-button--primary el-button--medium">
          {{ "导出" }}
        </download-excel>
      </el-form-item>
    </el-form>

    <el-table
      :height="height"
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        header-align="center"
        align="center"
        width="80"
        label="操作">
        <template slot-scope="scope">
          <a type="text" size="small" @click="hsCodeModel(scope.row)">维护</a>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item,index) in columnList" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed==''?false:item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="!item.columnHidden"> {{scope.row[item.columnProp]}}</span>
          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                             style="width: 100px; height: 80px"/></span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[20, 50, 100, 1000]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <el-dialog title="维护HSCode" :close-on-click-modal="false" v-drag :visible.sync="hsCodeModelFlag" width="500px">
      <el-form  label-position="top"  style="margin-left: 7px;margin-top: -5px;">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item :label="'物料编码:'">
              <el-input v-model="hsCodeModelData.partNo" disabled ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item :label="'物料名称'" >
              <el-input v-model="hsCodeModelData.partDesc" disabled ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="'HS Code'" >
              <el-input v-model="hsCodeModelData.hsCode"  ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="'品名'" >
              <el-input v-model="hsCodeModelData.hsCodeDesc"  ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-footer style="height:40px;margin-top: 10px;text-align:center">
        <el-button type="primary" @click="saveHSCode()">保存</el-button>
        <el-button type="primary" @click="hsCodeModelFlag=false">关闭</el-button>
      </el-footer>
    </el-dialog>


  </div>
</template>

<script>
  import {
    partInformationHsCode,savePartHSCode,
  }from "@/api/ecss/ecss.js"
  import {} from "@/api/sysLanguage.js"
  import {getAllBuList}from  '@/api/factory/site.js'
  export default {
    name: "null",
    components:{
    },
    data() {
      return {
        // 导出
        exportData: [],
        exportName: '物料HsCode' + this.dayjs().format('YYYYMMDDHHmmss'),
        exportHeader: ['物料HsCode'],
        exportFooter: [],
        pageIndex: 1,
        pageSize: 100,
        totalPage: 0,
        height: 200,
        dataList:[],
        dataListLoading: false,
        searchData: {
          site: '',
          userName: this.$store.state.user.name,
          buNo: '',
          partNo: '',
          startDate: '',
          endDate: '',
          partDesc: '',
          page: 1,
          limit: 10

        },
        buttons:{
          search:'查询',
        },
        columnList: [
          {
            userId: this.$store.state.user.name,
            functionId: 801005,
            serialNumber: '801005Table1Bu',
            tableId: '801005Table1',
            tableName: '物料信息表',
            columnProp: 'buDesc',
            headerAlign: 'center',
            align: 'center',
            columnLabel: 'BU',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 80
          },
          {
            userId: this.$store.state.user.name,
            functionId: 801005,
            serialNumber: '801005Table1PartNo',
            tableId: '801005Table1',
            tableName: '物料信息表',
            columnProp: 'partNo',
            headerAlign: 'center',
            align: 'left',
            columnLabel: '物料编码',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 120
          },
          {
            userId: this.$store.state.user.name,
            functionId: 801005,
            serialNumber: '801005Table1PartDesc',
            tableId: '801005Table1',
            tableName: '物料信息表',
            columnProp: 'partDesc',
            headerAlign: 'center',
            align: 'left',
            columnLabel: '物料描述',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 300
          },
          {
            userId: this.$store.state.user.name,
            functionId: 801005,
            serialNumber: '801005Table1HsCode',
            tableId: '801005Table1',
            tableName: '物料信息表',
            columnProp: 'hsCode',
            headerAlign: 'center',
            align: 'left',
            columnLabel: 'HsCode',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 80
          },
          {
            userId: this.$store.state.user.name,
            functionId: 801005,
            serialNumber: '801005Table1HsCodeDesc',
            tableId: '801005Table1',
            tableName: '物料信息表',
            columnProp: 'hsCodeDesc',
            headerAlign: 'center',
            align: 'left',
            columnLabel: '品名',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 200
          },
          {
            userId: this.$store.state.user.name,
            functionId: 801005,
            serialNumber: '801005Table1PartDesceEn',
            tableId: '801005Table1',
            tableName: '物料信息表',
            columnProp: 'partDesceEn',
            headerAlign: 'center',
            align: 'left',
            columnLabel: '物料描述（英文）',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 300
          },
          {
            userId: this.$store.state.user.name,
            functionId: 801005,
            serialNumber: '801005Table1Spec',
            tableId: '801005Table1',
            tableName: '物料信息表',
            columnProp: 'spec',
            headerAlign: 'center',
            align: 'left',
            columnLabel: '规格',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 300
          },
          {
            userId: this.$store.state.user.name,
            functionId: 801005,
            serialNumber: '801005Table1ActiveDesc',
            tableId: '801005Table1',
            tableName: '物料信息表',
            columnProp: 'activeDesc',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '是否在用',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 80
          },
          {
            userId: this.$store.state.user.name,
            functionId: 801005,
            serialNumber: '801005Table1PartType2Desc',
            tableId: '801005Table1',
            tableName: '物料信息表',
            columnProp: 'partType2Desc',
            headerAlign: 'center',
            align: 'left',
            columnLabel: '零件类型',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 100
          },
          {
            userId: this.$store.state.user.name,
            functionId: 801005,
            serialNumber: '801005Table1UmId',
            tableId: '801005Table1',
            tableName: '物料信息表',
            columnProp: 'umId2',
            headerAlign: 'center',
            align: 'left',
            columnLabel: '计量单位编码',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 100
          },
          {
            userId: this.$store.state.user.name,
            functionId: 801005,
            serialNumber: '801005Table1UmName',
            tableId: '801005Table1',
            tableName: '物料信息表',
            columnProp: 'umName',
            headerAlign: 'center',
            align: 'left',
            columnLabel: '计量单位名称',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 150
          },
          {
            userId: this.$store.state.user.name,
            functionId: 801005,
            serialNumber: '801005Table1FamilyID',
            tableId: '801005Table1',
            tableName: '物料信息表',
            columnProp: 'familyID',
            headerAlign: 'center',
            align: 'left',
            columnLabel: '物料分类编码',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 100
          },
          {
            userId: this.$store.state.user.name,
            functionId: 801005,
            serialNumber: '801005Table1FamilyName',
            tableId: '801005Table1',
            tableName: '物料信息表',
            columnProp: 'familyName',
            headerAlign: 'center',
            align: 'left',
            columnLabel: '物料分类名称',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 150
          },
          {
            userId: this.$store.state.user.name,
            functionId: 801005,
            serialNumber: '801005Table1OtherGroup1',
            tableId: '801005Table1',
            tableName: '物料信息表',
            columnProp: 'productGroupId1',
            headerAlign: 'center',
            align: 'left',
            columnLabel: '商品组1编码',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 100
          },
          {
            userId: this.$store.state.user.name,
            functionId: 801005,
            serialNumber: '801005Table1OtherGroupName1',
            tableId: '801005Table1',
            tableName: '物料信息表',
            columnProp: 'productGroupName1',
            headerAlign: 'center',
            align: 'left',
            columnLabel: '商品组1名称',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 150
          },
          {
            userId: this.$store.state.user.name,
            functionId: 801005,
            serialNumber: '801005Table1OtherGroup2',
            tableId: '801005Table1',
            tableName: '物料信息表',
            columnProp: 'productGroupId2',
            headerAlign: 'center',
            align: 'left',
            columnLabel: '商品组2编码',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 100
          },
          {
            userId: this.$store.state.user.name,
            functionId: 801005,
            serialNumber: '801005Table1OtherGroupName2',
            tableId: '801005Table1',
            tableName: '物料信息表',
            columnProp: 'productGroupName2',
            headerAlign: 'center',
            align: 'left',
            columnLabel: '商品组2名称',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 150
          },
          {
            userId: this.$store.state.user.name,
            functionId: 801005,
            serialNumber: '801005Table1OtherGroup3',
            tableId: '801005Table1',
            tableName: '物料信息表',
            columnProp: 'productGroupId3',
            headerAlign: 'center',
            align: 'left',
            columnLabel: '商品组3编码',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 100
          },
          {
            userId: this.$store.state.user.name,
            functionId: 801005,
            serialNumber: '801005Table1OtherGroupName3',
            tableId: '801005Table1',
            tableName: '物料信息表',
            columnProp: 'productGroupName3',
            headerAlign: 'center',
            align: 'left',
            columnLabel: '商品组3名称',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 150
          },
        ],
        hsCodeModelFlag:false,
        hsCodeModelData:{
          site: '',
          buNo: '',
          buDesc: '',
          partNo: '',
          partDesc: '',
          hsCode:'',
          hsCodeDesc:'',
        },
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.height = window.innerHeight - 240;
      })
    },
    methods: {
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.searchTable()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.searchTable()
      },
      searchTable(){
        this.searchData.limit = this.pageSize
        this.searchData.page = this.pageIndex
        partInformationHsCode(this.searchData).then(({data}) => {
          //区分请求成功和失败的状况
          if (data && data.code == 0) {
            this.dataList = data.page.list
            this.pageIndex = data.page.currPage
            this.pageSize = data.page.pageSize
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = [];
          }
        });
      },
      async createExportData () {
        this.searchData.limit = -1
        this.searchData.page = 1
        await partInformationHsCode(this.searchData).then(({data}) => {
          this.resultList = data.page.list
        })
        return this.resultList
      },

      startDownload () {},

      finishDownload () {},

      fields () {
        let json = '{'
        this.columnList.forEach((item, index) => {
          if (index == this.columnList.length - 1) {
            json += '"' + item.columnLabel + '"' + ':' + '"' + item.columnProp + '"'
          } else {
            json += '"' + item.columnLabel + '"' + ':' + '"' + item.columnProp + '"' + ','
          }
        })
        json += '}'
        let s = eval('(' + json + ')')
        return s
      },
      getBu () {
        let tempData = {
          username: this.$store.state.user.name,
        }
        getAllBuList(tempData).then(({data}) => {
          if (data.code === 0) {
            this.buList = data.rows
          }
        })
      },
      hsCodeModel(row){
        this.hsCodeModelData=JSON.parse(JSON.stringify(row))
        this.hsCodeModelFlag=true
      },
      saveHSCode(){
        if(this.hsCodeModelData.hsCode===''||this.hsCodeModelData.hsCode==null){
          this.$alert('请输入HSCODE！', '错误', {
            confirmButtonText: '确定'
          })
          return false
        }
        if(this.hsCodeModelData.hsCodeDesc===''||this.hsCodeModelData.hsCodeDesc==null){
          this.$alert('请输入品名！', '错误', {
            confirmButtonText: '确定'
          })
          return false
        }
        savePartHSCode(this.hsCodeModelData).then(({data}) => {
          if (data && data.code === 0) {
            this.searchTable()
            this.hsCodeModelFlag=false
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {}
            })
          } else {
            this.$alert(data.msg, '错误', {
              confirmButtonText: '确定'
            })
          }
        })
      },
    },
    created() {
      this.getBu();
    }
  }
</script>

<style scoped>

</style>
