<template>
  <template-page ref="pageRef" :get-list="getList" :export-list="exportList" :operation="operation()"
    :column-parsing="columnParsing" :options-evens-group="optionsEvensGroup">
    <el-dialog title="新增参考" :visible.sync="dialogVisible" width="460px" :before-close="handleClose">
      <el-form ref="formName" v-if="dialogVisible" size="mini" :model="form" label-width="80px">
        <el-form-item label="物料" prop="materialNumber" :rules="[
          { required: true, message: '请选择物料', trigger: 'blur' }
        ]">
          <el-select v-model="form.materialNumber" remote reserve-keyword placeholder="请选择物料" filterable
            style="width:100%" :remote-method="getMaterialListV2Http">
            <el-option v-for="(item, index) in selectList" :key="index" :label="item.name + ' - ' + item.specification"
              :value="item.number"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成本价" prop="costPrice" :rules="[
          { required: true, message: '请填写成本价', trigger: 'blur' }
        ]">
          <el-input v-model="form.costPrice" type="number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="handleClose">取 消</el-button>
        <el-button size="mini" type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </template-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import { materialReferPriceList, materialReferPriceListExport, materialReferPriceDetail, materialReferPriceSave, materialReferPriceDelete, materialReferPriceDownload, materialReferPriceImport } from '@/api/referCostPrice'
import { getMaterialListV2 } from '@/api/basic_data/material'
export default {
  components: { TemplatePage, },
  mixins: [import_mixin],
  data() {
    return {
      // 事件组合
      optionsEvensGroup: [
        [
          [
            {
              name: '新增',
              click: () => {
                this.openForm()
              }
            }
          ]
        ],
        [
          [
            {
              name: '下载模版',
              click: () => {
                materialReferPriceDownload({}, `${this.$route.meta.title}`)
                  .then(res => {
                    this.$message({
                      message: '下载成功',
                      type: 'success'
                    })
                  })
                  .catch(err => {
                    this.$message.error('下载失败')
                  })
              }
            }
          ]
        ],
        [
          [
            {
              name: '',
              render: this.importButton(materialReferPriceImport, '导入')
            }
          ]
        ],

      ],
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: false
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      recordSelected: [],
      dialogVisible: false,
      form: {
        materialNumber: "",
        costPrice: ""
      },
      selectList: []
    }
  },
  methods: {
    // 列表请求函数
    getList: materialReferPriceList,
    // 列表导出函数
    exportList: materialReferPriceListExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    openForm(text) {
      this.getMaterialListV2Http(text)
      this.dialogVisible = true
    },
    getMaterialListV2Http(text) {
      const loading = this.$loading({
        lock: true,
        text: '正在打开',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      if (!text) {
        getMaterialListV2({ "pageNum": 1, "pageSize": 100, "params": [] }).then(res => {
          this.selectList = res.data.records
          loading.close()
        }).catch(() => {
          loading.close()
        })
      } else {
        getMaterialListV2({ "pageNum": 1, "pageSize": -1, "params": [{ "param": "a.specification", "compare": "like", "value": text }] }).then(res => {
          this.selectList = res.data.records
          loading.close()
        }).catch(() => {
          loading.close()
        })
      }
    },
    handleClose() {
      this.dialogVisible = false
      this.form = {
        materialNumber: "",
        costPrice: ""
      }
    },
    operation() {
      return (h, { row, index, column }) => {
        return (
          <div class='operation-btns'>
            <el-button
              size='mini'
              type='text'
              onClick={() => {
                materialReferPriceDetail({ id: row.id }).then(res => {
                  this.form = {
                    id: res.data.id,
                    materialNumber: res.data.materialNumber,
                    costPrice: res.data.costPrice
                  }
                  this.openForm(row.specification)
                })
              }}
            >
              编辑
            </el-button>
            <el-popconfirm
              onConfirm={() => {
                materialReferPriceDelete({ id: row.id }).then(res => {
                  this.$successMsg('删除成功')
                  this.$refs.pageRef.refreshList()
                })
              }}
              title='删除吗？'
            >
              <el-button slot='reference' size='mini' type='text'>
                删除
              </el-button>
            </el-popconfirm>
          </div>
        )
      }
    },
    save() {
      this.$refs.formName.validate((valid) => {
        if (valid) {
          materialReferPriceSave({
            ...this.form
          }).then(res => {
            this.handleClose()
            this.$refs.pageRef.refreshList()
            this.$message({
              type: 'success',
              message: '保存成功!'
            })
          })
        } else {
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped></style>
