<!--
  @description: 商品审核弹框
  @Modifier：dijia
  @date：2021/07/07
-->
<template>
  <div>
    <el-dialog
      :visible.sync="dialogData.visible"
      :before-close="handleClose"
      :title="title"
      width="55%"
      custom-class="shop_mall_dialog"
    >
      <div class="p8">
        <p class="mb10">
          <span class="commodity-title">基本信息：</span>
        </p>
        <table class="commodity_table">
          <tr>
            <td>商品图片</td>
            <td colspan="3">
              <img :src="productDetail.productPicture" width="80px" height="80px" alt="">
            </td>
          </tr>
          <tr>
            <td>商品名称</td>
            <td>{{ productDetail.productName }}</td>
            <td>商品编码</td>
            <td>
              {{ productDetail.productCode }}
            </td>
          </tr>
          <tr>
            <td>商品分类</td>
            <td>{{ productDetail.productClassification }}</td>
            <td>品牌</td>
            <td>
              {{ productDetail.brandName }}
            </td>
          </tr>
          <tr>
            <td>协议供货</td>
            <td>电商直采</td>
            <td>协议供货中间商</td>
            <td>
              {{ productDetail.protocolMiddleAgency }}
            </td>
          </tr>
          <tr>
            <td>库存量</td>
            <td>{{ productDetail.inventoryQuantity }}</td>
            <td>商品单位</td>
            <td>
              {{ productDetail.unit }}
            </td>
          </tr>
          <tr>
            <td>生产地</td>
            <td>{{ productDetail.productArea || '无' }}</td>
            <td>型号</td>
            <td>
              {{ productDetail.model || '无' }}
            </td>
          </tr>
          <tr>
            <td>价格（元）</td>
            <td class="amount">
              ￥{{ productDetail.commodityPrice }}
            </td>
            <td>市场价(元)</td>
            <td class="amount">
              ￥{{ productDetail.marketPrice }}
            </td>
          </tr>
          <tr>
            <td>商品详情</td>
            <td colspan="3" class="description" v-html="productDetail.productDescription">
              <!-- {{ formData.productDescription }} -->
            </td>
          </tr>
        </table>
        <div v-if="dialogData.code === 'view'" class="mt10">
          <p class="mb10">
            <span class="commodity-title">审核意见：</span>
          </p>
          <el-table
            ref="multipleTables"
            :data="tableDataDtail"
            tooltip-effect="light"
            :stripe="false"
            :border="false"
            style="width: 98%;margin:10px auto;"
          >
            <el-table-column
              prop="auditUserRealName"
              label="审核人"
              min-width="50px"
              align="center"
            />
            <el-table-column
              label="审核意见"
              min-width="150px"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.auditNotPassReason || '无' }}
              </template>
            </el-table-column>
            <el-table-column
              prop="auditTime"
              label="审核结果"
              min-width="50px"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.auditStatus == '00' ? '待审核' : scope.row.auditStatus == '01' ? '审核通过' : '驳回' }}
              </template>
            </el-table-column>
            <el-table-column
              prop="auditTime"
              label="审核时间"
              min-width="70px"
              align="center"
            />
          </el-table>
        </div>
        <div v-if="dialogData.code === 'examine'" class="mt10">
          <p class="mb10">
            <span class="commodity-title">审核结果：</span>
          </p>
          <div class="commodity-res">
            <span>审核结果：</span>
            <el-radio-group v-model="formData.type">
              <el-radio v-for="(item,index) in commodityList" :key="index" :label="item.typecode">
                {{ item.typename }}
              </el-radio>
            </el-radio-group>
          </div>
          <div class="commodity-res">
            <span class="mt10">审核意见：</span>
            <el-input
              v-model="formData.auditOption"
              :rows="3"
              type="textarea"
              maxlength="250"
              show-word-limit
              placeholder="请输入审核意见"
              style="margin-top:10px;"
            />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="dialogData.code === 'examine'" type="purple" class="mr30" @click="dialogClick">
          提 交
        </el-button>
        <el-button @click="cancelClick">
          {{ dialogData.code === 'examine' ? '取 消' : '返 回' }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// api
import { saveProductAudit, getProductAuditSteps } from '@/api/shoppingmall/products'
export default {
  name: 'CommodityAuditDialog',
  props: {
    dialogData: {
      type: Object,
      default: function() {}
    },
    // 商品详细信息
    productDetail: {
      type: Object,
      default: function() {}
    }
  },
  data() {
    return {
      // 审核状态
      commodityList: [
        { typename: '通过', typecode: '01' },
        { typename: '不通过', typecode: '02' }
      ],
      formData: {
        // 审核意见
        auditOption: null,
        // 商品ID
        id: null,
        // 审核标识位 01 审核通过 02 审核拒绝
        type: '01'
      },
      tableDataDtail: [],
      title: '审核'
    }
  },
  watch: {
    'dialogData.visible'(val) {
      if (val && this.dialogData.code === 'examine') {
        this.title = '审核'
      }
      if (val && this.dialogData.code === 'view') {
        this.title = '详情'
        getProductAuditSteps(this.dialogData.id).then(res => {
          this.tableDataDtail = res.data
        })
      }
    }
  },
  methods: {
    // 关闭弹框
    handleClose(done) {
      done()
      this.formData = {
        auditOption: null,
        id: null,
        type: '01'
      }
    },
    // 点击提交
    dialogClick() {
      this.formData.id = this.dialogData.id
      if (!this.formData.auditOption && this.formData.type === '02') {
        this.$message.error('审核不通过，请填写审核意见！')
        return
      }
      saveProductAudit(this.formData).then(res => {
        if (res.header.ret === '0') {
          this.$message.success('提交成功！')
          this.dialogData.visible = false
          this.$emit('call-back')
          this.formData = {
            auditOption: null,
            id: null,
            type: '01'
          }
        }
      })
    },
    // 点击取消时重置
    cancelClick() {
      this.dialogData.visible = false
      this.formData = {
        auditOption: null,
        id: null,
        type: '01'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.amount {
  color: #1f94f4;
}
.table_res {
  width: 100%;
}
.commodity_table {
  width: 98%;
  margin: 0 auto;

  td {
    border: 1px solid #E0E0E0;
    line-height: 20px;
    padding: 6px;

    .el-form-item--small.el-form-item {
      margin: 0;
    }

    .el-input {
      width: 90%;
    }
  }

  tr td:nth-child(odd) {
    background-color: #F5F7F9;
    width: 16%;
  }

  tr td:nth-child(even) {
    width: 34%;
  }

}
.commodity-title {
  font-weight: 700;
  font-size: 15px;
}
.commodity-res {
  display: flex;
  width: 98%;
  margin: 0 auto 20px;
  span {
    margin-right: 20px;
    width: 12%;
  }
  .el-textarea {
    width: 75%;
  }
}
.commodity-title-res {
  width: 98%;
  left: 1%;
}
.mr30 {
  margin-right: 30px;
}

/deep/ .description{
  img{
    width: 60px;
    height: 60px;
  }
}
</style>
