<template>
  <div class="auditDetail app-container">
    <el-form
      v-loading="loading"
      :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"
          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="tableData"
          tooltip-effect="dark"
          border
          style="width: 600px"
        >
          <el-table-column
            align="center"
            label="人员类型"
            prop="name"
            show-overflow-tooltip
          >
           <template slot-scope="scope">
             {{scope.row.name}}
            </template>
          </el-table-column>
          <el-table-column
            prop="shopName"
            align="center"
            label="购买设置"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-checkbox
                :false-label="1"
                :true-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.buyPrice"
                :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="setQuery.checkDetail"
          maxlength="400"
          :rows="6"
          class="item-width-500"
          show-word-limit
        >
        </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getCheckDetail } from "@/api/goods";
import { getSetMealNameAndId } from "@/api/common";
import Upload from "@/components/Upload";
export default {
  components: {
    Upload,
  },
  data() {
    return {
      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" },
        ],
      },
      mealList: null,
      options: [
        {
          value: "1",
          label: "立减券",
        },
        {
          value: "2",
          label: "折扣券",
        },
        {
          value: "3",
          label: "满减券",
        },
      ],
      tableData: [
        { setMealId: 0, buySet: 2, buyNum: 2, buyPrice: 0, name: "非会员" },
        { setMealId: 1, buySet: 2, buyNum: 5, buyPrice: 5, name: "10元套餐" },
        { setMealId: 2, buySet: 2, buyNum: 7, buyPrice: 7, name: "20元套餐" },
        { setMealId: 3, buySet: 2, buyNum: 1, buyPrice: 9, name: "30元套餐" },
      ],
      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 {
      }
    },
  },
  methods: {
    handleTab(val) {
      // this.setQuery.useType = val
      val == 2 ? (this.nums = 7) : (this.nums = 31);
    },
    // 商品详情
    getCheckDetail() {
      this.loading = true;
      getCheckDetail({ goodsId: this.$route.query.id }).then((res) => {
        this.loading = false;
        if (res.state == "Success") {
          this.setQuery = res.content;
          this.tableData = res.content.details;
          this.getSetMealNameAndId().then((r) => {
            // 替换套餐名
            this.tableData.map((item) => {
              if (item.setMealId == 0) {
                this.$set(item,'name',"非会员")
              } else {
                this.$set(item,'name',r[item.setMealId])
              }
            });
          });
        }
      });
    },
    getSetMealNameAndId() {
      return new Promise((resolve, reject) => {
        getSetMealNameAndId().then((res) => {
          if (res.state == "Success") {
            resolve(res.content);
          }
        });
      });
    },
  },
  created() {
    this.getCheckDetail();
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/element-variables";
.auditDetail {
  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>