<template>
  <div>

    <div ref="lxHeader">
      <lx-header icon="md-apps"  :text="$route.meta.title" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
          <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
            <Input v-model="select.keyword" style="width: 200px;margin-right: 10px;" placeholder="关键词搜索" />
            <Input v-model="select.yijifenlei" style="width: 200px;margin-right: 10px;" placeholder="一级分类搜索" />
            <Input v-model="select.erjifenlei" style="width: 200px;margin-right: 10px;" placeholder="二级分类搜索" />

            <!-- <el-select v-model="select.guanliancangku" @change="changeCk" style="width: 200px;" placeholder="请选择仓库">
              <el-option v-for="item in cangkuList" :key="item.id" :label="item.cangkumingcheng"
                :value="item.cangkumingcheng">
              </el-option>
            </el-select> -->
            <Select v-model="select.guanliancangku" style="width:200px;margin-right: 10px;" placeholder="所在仓库" clearable>
              <Option v-for="item in cangkuList" :key="item.value" :value="item.id">{{ item.cangkumingcheng }}</Option>
            </Select>
            <Select v-model="select.quyu_id" style="width: 200px;margin-right: 10px;" placeholder="所在区域" clearable>
              <Option v-for="item in areaList" :key="item.id" :value="item.id">{{ item.value }}</Option>
            </Select>

            <!-- <Select v-model="select.area" style="width: 200px;margin-right: 10px;" placeholder="所在区域" clearable @on-change="clearArea">
              <Option v-for="item in areaList" :key="item.id" :value="item.id">{{ item.value }}</Option>
            </Select> -->
            <Button type="primary" @click="getindex('page')">查询</Button>
            <Button
              type="primary"
              style="margin-left: 10px;"
              @click="$refs['addMater'].isShow = true,$refs['addMater'].type = 'add',$refs['addMater'].setCkList(cangkuList)"
            >添加</Button>
            <Button
              type="primary"
              style="margin-left: 10px;"
              @click="$refs['imports'].show()"
            >导入</Button>
            <!-- <Button type="primary" style="margin-left: 10px;"
                @click="exportExcel(new Date().getTime().toString())">导出</Button> -->
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table
      v-loading="loading"
      :list="list"
      :total="total"
      :table-item="table"
      @pageSizeChange="e => select.pageSize = e"
      @pageIndexChange="pageChange"
    >
      <template v-slot:suozaiquyu>
        <el-table-column align="center" label="所在区域" width="120" header-align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.quyu_detail">
              {{ scope.row.quyu_detail.value?scope.row.quyu_detail.value:'' }}
            </div>
            <div v-else />

          </template>
        </el-table-column>

      </template>
      <template v-slot:btns>
        <el-table-column fixed="right" label="操作" width="180" header-align="center">
          <template slot-scope="scope">
            <div>
              <Button
                type="primary"
                size="small"
                style="margin-left: 10px;"
                @click="editorMater(scope.row.id,'editor')"
              >编辑</Button>
              <Poptip transfer confirm title="确认要删除吗？" @on-ok="deleteMater(scope.row)">
                <Button type="error" style="margin-left: 10px;" size="small" ghost>删除</Button>
              </Poptip>
            </div>

          </template>
        </el-table-column>
      </template>

    </xy-table>
    <addMater ref="addMater" @refresh="getindex" />

    <imports ref="imports" :table-name="customForm.tableName" :form-info="importForm" @refresh="getindex" />

  </div>
</template>

<script>
import {
  index,
  destroy
} from '@/api/system/baseForm.js'
import addMater from './components/addMater.vue'
import {
  Message
} from 'element-ui'
import imports from '@/views/component/imports.vue'
import {
  getparameteritem
} from '@/api/system/dictionary.js'
export default {
  components: {
    addMater,
    imports
  },
  data() {
    return {
      loading: false,
      select: {
        pageSize: 10,
        pageIndex: 1,
        keyword: '',
        yijifenlei: '',
        erjifenlei: '',
        guanliancangku: '',
        area: ''
      },
      areaList: [],
      customForm: {
        tableName: 'flood_materials'
      },
      form: [],
      importForm: [],
      total: 0,
      list: [],
      cangkuList: [],
      table: [{
        label: '序号',
        type: 'index',
        fixed: 'left',
        width: 80
      },
      // {
      //   label: "关联仓库",
      //   width: 120,
      //   prop: 'guanliancangku',
      //   align: 'center',
      // },
      {
        label: '仓库名称',
        width: 220,
        prop: 'cangkumingcheng',
        align: 'left'
      },
      {
        label: '代储单位',
        width: 220,
        prop: 'daichudanwei',
        align: 'left'
      },
      {
        label: '一级分类',
        width: 120,
        prop: 'yijifenlei',
        align: 'center'
      },
      {
        label: '二级分类',
        width: 120,
        prop: 'erjifenlei',
        align: 'center'
      },
      {
        label: '所属种类',
        width: 120,
        prop: 'fenlei',
        align: 'center'
      },
      // {
      //   label: "所在区域",
      //   width: 120,
      //   prop: 'suozaiquyu',
      //   align: 'center',
      // },
      {
        label: '物资代码',
        width: 120,
        prop: 'wuzidaima',
        align: 'left'
      },
      {
        label: '现物资名称',
        width: 120,
        prop: 'xianwuzimingcheng',
        align: 'center'
      },
      {
        label: '原物资名称',
        width: 120,
        prop: 'yuanwuzimingcheng',
        align: 'left'
      },
      {
        label: '物资型号',
        width: 120,
        prop: 'guigexinghao',
        align: 'center'
      },
      {
        label: '数量',
        width: 80,
        prop: 'shuliang',
        align: 'center'
      },
      {
        label: '单位',
        width: 80,
        prop: 'danwei',
        align: 'center'
      },
      {
        label: '价值（元）',
        width: 80,
        prop: 'jiazhiyuan',
        align: 'center'
      },
      {
        label: '生产日期',
        width: 120,
        prop: 'shengchanriqi',
        align: 'center'
      },
      {
        label: '入库日期',
        width: 120,
        prop: 'rukuriqi',
        align: 'center'
      },
      {
        label: '储备年限',
        width: 80,
        prop: 'chubeinianxian',
        align: 'center'
      },
      {
        label: '状态',
        width: 80,
        prop: 'zhuangtai',
        align: 'center'
      },
      {
        label: '资金来源',
        width: 120,
        prop: 'zijinlaiyuan',
        align: 'center'
      },
      {
        label: '储备方式',
        width: 120,
        prop: 'chubeifangshi',
        align: 'center'
      },
      {
        label: '储备地点',
        width: 180,
        prop: 'chubeididian',
        align: 'left'
      },
      {
        label: '备注',
        width: 180,
        prop: 'beizhu',
        align: 'left'
      },
      {
        label: '储备层级',
        width: 120,
        prop: 'chubeicengji',
        align: 'left'
      },
      {
        label: '是否展示',
        width: 120,
        prop: 'shifouzhanshi',
        align: 'left'
      }
      ]
    }
  },
  mounted() {
    this.getArea()
    this.getCangku()
    this.getindex()
    this.table.map(item => {
      if(item.type !== 'index'){
        this.importForm.push({
          field: item.prop,
          name: item.label
        })
      }
    })
    this.importForm.unshift({
      filed:'is_chart',
      name:'是否统计'
    })
    this.importForm.unshift({
      filed:'quyu',
      name:'区域'
    })
    // this.importForm.unshift({
    //   filed:'二级分类',
    //   name:'二级分类'
    // })
    // this.importForm.unshift({
    //   filed:'一级分类',
    //   name:'一级分类'
    // })
    console.log('importForm', this.importForm)
  },
  methods: {
    getArea() {
      getparameteritem('area').then(res => {
        this.areaList = res.detail
      })
    },

    async getCangku() {
      const res = await index({
        page_size: 999,
        page: 1,
        table_name: 'materialstorages'
      })
      this.cangkuList = res.data
    },
    async getindex(page) {
      this.loading = true
      if (page == 'page') {
        this.select.pageIndex = 1
      }
      const res = await index({
        page_size: this.select.pageSize,
        page: this.select.pageIndex,
        table_name: this.customForm.tableName,
        quyu_id: this.select.quyu_id ? this.select.quyu_id : '',
        filter: [{
          'key': 'xianwuzimingcheng',
          'op': 'like',
          'value': this.select.keyword ? this.select.keyword : ''
        }, {
          'key': 'guanliancangku',
          'op': 'eq',
          'value': this.select.guanliancangku ? this.select.guanliancangku : ''
        }, {
          'key': 'yijifenlei',
          'op': 'like',
          'value': this.select.yijifenlei ? this.select.yijifenlei : ''
        }, {
          'key': 'erjifenlei',
          'op': 'like',
          'value': this.select.erjifenlei ? this.select.erjifenlei : ''
        }]
      })
      this.list = res.data
      this.total = res.total
      this.loading = false
    },

    pageChange(e) {
      this.select.pageIndex = e
      this.getindex()
    },
    editorMater(id, type) {
      this.$refs['addMater'].id = id
      this.$refs['addMater'].type = type
      this.$refs['addMater'].setCkList(this.cangkuList)
      this.$refs['addMater'].isShow = true
    },
    deleteMater(row) {
      destroy({
        id: row.id,
        table_name: this.customForm.tableName
      }).then(res => {
        Message({
          type: 'success',
          message: '删除成功'
        })
        this.getindex()
      })
    }

  }

}
</script>

<style scoped>
  /deep/ .draw {
    padding-left: 20px;
  }

  /deep/ .draw>div {
    font-size: 20px;
    margin: 15px 0
  }

  /deep/ .el-timeline-item {
    list-style: none;
  }
</style>
