<template>
  <!-- 表单渲染 -->
  <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelView" :visible="visible" :title="title" width="860px">
    <el-form ref="formViewRef" :model="formData" :rules="rules" :status-icon="true" label-width="240px">
      <el-form-item label="供应商名称：" class="form-cell" prop="supplierName">
        <div class="cell-box">
          <el-autocomplete
            v-model="formData.supplierName"
            class="cell-input"
            :fetch-suggestions="querySearch"
            placeholder="单行输入"
            :trigger-on-focus="false"
            @select="handleSelect"
          />
        </div>
      </el-form-item>
      <el-form-item label="供应商ID：" class="form-cell" prop="customerId">
        <div class="cell-box">
          <el-input v-model="formData.customerId" placeholder="单行输入" class="cell-input" />
        </div>
      </el-form-item>
      <el-form-item label="标识设置：" class="form-cell" prop="mark">
        <div class="cell-box">
          <el-select v-model="formData.mark" placeholder="无" class="cell-select">
            <el-option v-for="item in dict.supplier_rank" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="顺序：" class="form-cell" prop="sort">
        <div class="cell-box">
          <el-input v-model.number="formData.sort" type="number" placeholder="请输入数字" class="cell-input" />
        </div>
      </el-form-item>
      <el-form-item label="展示产品ID：" class="form-cell">
        <div class="cell-box">
          <el-input v-model="formData.pid0" placeholder="单行输入" class="cell-input" />
        </div>
        <div class="cell-box">
          <el-input v-model="formData.pid1" placeholder="单行输入" class="cell-input" />
        </div>
        <div class="cell-box">
          <el-input v-model="formData.pid2" placeholder="单行输入" class="cell-input" />
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button @click="cancelView">关闭</el-button>
      <el-button type="primary" @click="submitForm()">保存</el-button>
      <el-button v-if="formData.supplierListPageId" type="success" @click="submitForm(true)">发布</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { HttpReq } from '@/api/common'

export default {
  dicts: ['supplier_rank'],
  data() {
    return {
      visible: false,
      title: '内容管理供应商设置',
      formData: {
        supplierName: '',
        customerId: '',
        mark: '1',
        sort: '999',
        pid0: '',
        pid1: '',
        pid2: '',
        productIdList: '',
        supplierListPageId: null
      },
      rules: {
        supplierName: { validator: this.checkEnterpriseName, trigger: 'blur' }
      }
    }
  },
  mounted() {
  },
  methods: {
    checkEnterpriseName(rule, value, callback) {
      this.$nextTick(_ => {
        HttpReq.backstageApi.checkEnterpriseName({
          name: value, id: this.formData.customerId
        }).then((res) => {
          if (res.data) {
            callback()
          } else {
            callback(new Error(res.msg))
          }
        })
      })
    },
    querySearch(queryString, cb) {
      HttpReq.backstageApi.associateQueryEnterpriseName({
        name: queryString
      }).then((res) => {
        cb(res.data)
      })
    },
    handleSelect(item) {
      this.formData.customerId = item.id
      this.$refs.formViewRef.validateField('supplierName', valid => {
        return valid
      })
    },
    showView() {
      this.visible = true
    },
    hideView() {
      this.$refs.formViewRef.resetFields()
      this.visible = false
      this.formData = {
        supplierName: '',
        customerId: '',
        mark: '1',
        sort: '999',
        pid0: '',
        pid1: '',
        pid2: '',
        productIdList: '',
        supplierListPageId: null
      }
    },
    cancelView() {
      this.hideView()
    },
    release() {
      HttpReq.backstageApi.releaseSupplierListPage({ ids: [this.formData.supplierListPageId] }).then((res) => {
        this.$notify({
          title: res.msg,
          type: res.code === 200 ? 'success' : 'error',
          duration: 2500
        })
        if (res.code === 200) {
          this.cancelView()
          this.$parent.loadData()
        }
      })
    },
    submitForm(isRelease) {
      this.$refs.formViewRef.validate((valid, obj) => {
        if (valid) {
          this.formData.productIdList = [this.formData.pid0, this.formData.pid1, this.formData.pid2].join(';')
          if (this.formData.supplierListPageId) {
            HttpReq.backstageApi.updateSupplierListPage(this.formData).then((res) => {
              this.$notify({
                title: res.msg,
                type: res.code === 200 ? 'success' : 'error',
                duration: 2500
              })
              if (res.code === 200) {
                if (isRelease) {
                  this.release()
                } else {
                  this.cancelView()
                  this.$parent.loadData()
                }
              }
            })
          } else {
            HttpReq.backstageApi.addSupplierListPage(this.formData).then((res) => {
              this.$notify({
                title: res.msg,
                type: res.code === 200 ? 'success' : 'error',
                duration: 2500
              })
              if (res.code === 200) {
                if (isRelease) {
                  this.release()
                } else {
                  this.cancelView()
                  this.$parent.loadData()
                }
              }
            })
          }
        } else {
          this.$message({
            message: '表单信息有误，请核对无误后提交！',
            type: 'error'
          })
        }
      })
    },
    loadData(supplierListPageId) {
      if (supplierListPageId) {
        HttpReq.backstageApi.querySupplierListPageById({ supplierListPageId }).then((res) => {
          if (res.code === 200) {
            this.formData = Object.assign(this.formData, res.data)
            if (this.formData.productIdList) {
              const arr = this.formData.productIdList.split(';')
              this.formData.pid0 = arr[0]
              this.formData.pid1 = arr[1]
              this.formData.pid2 = arr[2]
            }
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
        })
      }
      this.showView()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.cell-box {
  min-width: 120px;
  .cell-input {
    width: 420px;
  }
  .cell-select {
    width: 220px;
  }
  >>>.el-input__inner {
    border: 1px solid rgba(100, 100, 100, 0.1);
    border-bottom: 1px solid rgba(100, 100, 100, 0.2);
    border-radius: 5px;
  }
  >>>.el-input.is-disabled .el-input__inner {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid rgba(100, 100, 100, 0.4);
    background: white;
    cursor: text;
  }
  >>>.el-input.is-disabled .el-input__icon {
    cursor: text;
  }
  >>>.el-icon-circle-check {
    color: #13ce66;
  }
  >>>.el-icon-arrow-up:before {
    content: '';
  }
}
</style>
