<template>
  <div class="auditGoods app-container">
    <el-form
      :model="form"
      ref="form"
      :rules="rules"
      label-width="130px"
      
    >
      <el-form-item label="商品名称：">
        <el-input
          v-model="setQuery.goodsName"
          :maxlength="11"
          class="item-width-300"
          disabled
        ></el-input>
      </el-form-item>
       <el-form-item label="商品类型：">
        <el-select v-model="setQuery.goodsType" disabled class="item-width-300" placeholder="请选择商品类型">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="setQuery.goodsType == 1" label="立减额度：">
        <el-input
        disabled
          v-model.number="setQuery.discount"
          :maxlength="18"
          class="item-width-300"
        >
        <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item v-else-if="setQuery.goodsType == 2" label="折扣率：">
        <el-input
        disabled
          v-model.number="setQuery.discount"
          :maxlength="18"
          class="item-width-300"
        >
        <template slot="append">%</template>
        </el-input>
      </el-form-item>
      <el-form-item v-else-if="setQuery.goodsType == 3" label="满减规则：">
        <el-input
        disabled
          v-model.number="setQuery.condition"
          :maxlength="18"
          class="item-width-150"
        >
        </el-input>
        减
         <el-input
         disabled
          v-model.number="setQuery.discount"
          :maxlength="18"
          class="item-width-100"
        >
        </el-input>
      </el-form-item>
       <el-form-item label="售价：">
        <el-input
          v-model="setQuery.realPrice"
          :maxlength="11"
          class="item-width-300"
          disabled
        ></el-input>
      </el-form-item>
       <el-form-item label="库存：">
        <el-input
          v-model="setQuery.stockCount"
          :maxlength="11"
          disabled
          class="item-width-300"
        ></el-input>
      </el-form-item>
      <el-form-item label="使用限制时间：">
       <div class="tabs">
        <div class="tab" v-for="(item,index) in tabs" :class="[setQuery.useType == index+1?'active':'']" :key="item" @click="handleTab(index+1)">{{item}}</div>
       </div>
         <el-date-picker
         v-show="tab == 2"
        v-model="date"
        type="datetimerange"
        class="item-width-400"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right">
        </el-date-picker>

          <el-select
          disabled
          v-show="tab == 3 || tab == 4"
        v-model="setQuery.day"
        multiple
        clearable
        filterable
        class="item-width-400"
        placeholder="请选择">
        <el-option
        v-for="item in nums"
        :key="item"
        :label="(nums == 7 ?'每周':'每月') + item + (nums == 31 ?'号':'')"
        :value="item">
        </el-option>
    </el-select>
      </el-form-item>

      <el-form-item label="商品说明：">
        <el-input
        disabled
          type="textarea"
          placeholder="请输入商品说明，限100字"
          v-model="setQuery.goodsDescribe"
          maxlength="100"
          :rows="6"
           class="item-width-300"
          show-word-limit
        >
        </el-input>
      </el-form-item>
      <el-form-item label="商品购买设置：">
       <el-table
      :data="setQuery.details"
      tooltip-effect="dark"
      border
      style="width: 600px"
    >
      <el-table-column
        align="center"
        label="人员类型"
        prop="setMealId"
        show-overflow-tooltip
      >
      <template slot-scope="scope">
        {{scope.row.setMealId | filterMeal(that)}}
      </template>
      </el-table-column>
      <el-table-column
        prop="shopName"
        align="center"
        label="购买设置"
        show-overflow-tooltip
      >
       <template slot-scope="scope">
          <el-checkbox :true-label="1" :false-label="2" v-model="scope.row.buySet">限制购买</el-checkbox>
        </template>
      </el-table-column>
      <el-table-column
        prop="shopName"
        align="center"
        label="限购数量"
        show-overflow-tooltip
      >
       <template slot-scope="scope">
         <el-input
          v-model="scope.row.buyNum"
          :maxlength="8"
          size="small"
          class="item-width-100"
        >
        </el-input>
        </template>
      </el-table-column>
      <el-table-column
        prop="shopName"
        align="center"
        label="优惠价格"
        show-overflow-tooltip
      >
       <template slot-scope="scope">
         <el-input
          v-model="scope.row.buyPrice"
          :maxlength="8"
          size="small"
          class="item-width-100"
        >
        </el-input>
        </template>
      </el-table-column>
    </el-table>
      </el-form-item>

      <el-form-item label="审核意见：" prop="checkDetail">
        <el-input
          type="textarea"
          placeholder="请输入审核意见"
          v-model="form.checkDetail"
          maxlength="400"
          :rows="6"
           class="item-width-500"
          show-word-limit
        >
        </el-input>
      </el-form-item>
    </el-form>

    <div class="btn-group">
       <el-button  type="danger" :loading="loading"  @click="save(3)">拒 绝</el-button>
     <el-button type="primary" :loading="loading"  @click="save(2)">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { get,getCheckDetail,check,goodsCouponSet } from '@/api/goods'
import Upload from '@/components/Upload'
import {getSetMealNameAndId} from '@/api/common'
export default {
    components: {
        Upload,
    },
  data() {
    return {
      that:this,
        nums:7,
        value2:'',
        tabs:['不限制','自定义时间','每周','每月'],
        tab:1,
        date:'',
        loading:false,
      setQuery: {
         "goodsName": "立减10元",
          "goodsType": "1",
          "goodsCode": "102",
          "condition": 0,
          "discount": 10,
          "realPrice": 0,
          "stockCount": 10,
          "useType": 0,
          "useStartTime": null,
          "useEndTime": null,
          "goodsDescribe": "商品描述",
          "goodsWeight": 99,
          "checkUser": null,
          "checkDetail": "名字不规范、不予通过",
          "checkTime": "2023-11-03 17:34:25",
          "details": null
      },
      form:{
          checkDetail:''
      },
      rules: {
        checkDetail: [{ required: true, message: "请输入审核意见", trigger: "blur" }],
        
      },
      options: [
        {
          value: "1",
          label: "立减券",
        },
        {
          value: "2",
          label: "折扣券",
        },
        {
          value: "3",
          label: "满减券",
        },
      ],
      mealOption:[],

       pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
    };
  },
  watch: {
    date(val) {
      console.log(val);
      if(val){

      }else{

      }
    }
  },
  filters: {
    filterMeal: function(val,that) {
      let msg
      that.mealOption.map(item=>{
        if(val == item.value){
          msg = item.label
        }else if(val === 0){
          msg = '无套餐'
        }
      })
      return msg
    }
  },
  methods: {
    handleTab(val){
        // this.setQuery.useType = val
        val == 2?this.nums =7:this.nums =31
    },
    save(applyState) {
      this.$refs.form.validate((v) => {
        if (v) {
          this.loading = true
          this.goodsCouponSet().then(res=>{
            this.check(applyState)
          })
        }
      });
    },
    // 商品详情
    get(){
      this.loading = true
      getCheckDetail({goodsId:this.$route.query.id}).then(res=>{
      this.loading = false
          if(res.state == 'Success'){
            this.setQuery = res.content
          }
      })
    },
    // 获取套餐列表
    getSetMealNameAndId(){
      getSetMealNameAndId().then(res=>{
        if(res.state == 'Success'){
          for (const key in res.content) {
            if (Object.hasOwnProperty.call(res.content, key)) {
              this.mealOption.push({
                label:res.content[key],
                value:key
              })
            }
          }
          
        }
      })
    },
    // 商品购买配置
    goodsCouponSet(){
      return new Promise((resolve,reject)=>{
        goodsCouponSet(this.setQuery.details).then(res=>{
              this.loading = true
              if(res.state == 'Success'){
                resolve()
              }
            })
      })
      
    },
    check(applyState){
      check({ 
            "applyState": applyState,
            "checkDetail": this.form.checkDetail,
            "checkUserId": localStorage.getItem('epid'),
            "goodsId": this.$route.query.id}).then(res=>{
              this.loading = false
              if(res.state == 'Success'){
                this.$notify({
                    title: '成功',
                    message: '操作成功',
                    type: 'success'
                  });
                  this.$router.push('/operationManage/shopManage/index')
              }
            })
    }
  },
  created () {
    this.get();
    this.getSetMealNameAndId();
  },
};
</script>

<style lang="scss" scoped>
@import '@/styles/element-variables';
.auditGoods {
  padding-bottom: 40px;
  .btn-group{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tabs{
    display:flex;
    border-radius: 4px;
    margin-bottom: 10px;
    cursor: pointer;
    .tab{
        width: 90px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #f1f1f1;
    }
  }
  .active{
    color: $--color-primary;
    border: 1px solid $--color-primary!important;
    background: #d1d3fa;
        border-radius: 4px;

  }
}
</style>