<template>
  <div id="makeCheck">
    <el-dialog
      :visible.sync="dialogVisibleTableBoxs"
      width="1100px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">关联商品</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="dialogVisibleTableBoxs = false"
          />
        </div>
      </div>
      <div style="margin-bottom: 10px">
        <!-- 搜索框 -->
        <el-input
          style="width: 230px; margin: 0px 10px"
          :size="size"
          v-model="formData['searchKey']"
          placeholder="请输入商品编码/商品名称"
        ></el-input>
        <el-button :size="size" type="primary" @click="getInfos(1)"
          >查询</el-button
        >
        <el-button :size="size" @click="getInfos(0)">重置</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        border
        :header-cell-style="{
          'background-color': '#eee',
          padding: '8px',
          color: '#333',
        }"
      >
        <el-table-column label="" width="45" align="center">
          <template scope="scope">
            <el-radio
              :disabled="scope.row.selectStatus === 0"
              :label="scope.row.goodsId"
              v-model="activeObj.makeGoodsId"
              @change.native="getGoodsId(scope.row)"
              >{{ "" }}</el-radio
            >
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in tableSet"
          :width="item.width"
          :key="index"
          :label="item.label"
          align="center"
          :show-overflow-tooltip="true"
          header-align="center"
        >
          <template slot-scope="scope">
            <span v-if="item.scope === 'status'">{{
              scope.row[item.prop] === 1 ? "上架" : "未上架"
            }}</span>
            <span v-else-if="item.scope === 'status1'">{{
              scope.row[item.prop] === 1 ? "有效" : "无效"
            }}</span>
            <span v-else-if="item.scope === 'times'">
              {{ $methodsTools.onlyForma(scope.row[item.prop1]) }} -
              {{ $methodsTools.onlyForma(scope.row[item.prop2]) }}
            </span>
            <span v-else>{{ scope.row[item.prop] }}</span></template
          >
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :pageSize="formData.pageSize"
        :currentPage="formData.pageNum"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleTableBoxs = false">取 消</el-button>
        <el-button
          type="primary"
          :disabled="!activeObj.makeGoodsId"
          @click="submitTab"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pagination from "@/components/pagination";
export default {
  components: { pagination },
  data() {
    return {
      size: "small",
      dialogVisibleTableBoxs: false,
      tableData: [],
      tableSet: [
        {
          label: "商品编码",
          prop: "code",
          width: "140px",
        },
        {
          label: "商品名称",
          prop: "goodsName",
          width: "260px",
        },
        {
          label: "标准价格（￥）",
          prop: "standPrice",
          width: "140px",
        },
        {
          label: "商品状态",
          prop: "status",
          scope: "status1",
          width: "110px",
        },
        {
          label: "商品有效期",
          prop1: "validityStartTime",
          prop2: "validityEndTime",
          scope: "times",
          width: "310px",
        },
        {
          label: "商品可售状态",
          prop: "goodsStatus",
          scope: "status",
          width: "130px",
        },
      ],
      formData: {},
      total: 0,
      activeObj: {
        makeGoodsId: "",
        makeGoodsName: "",
        makeGoodsCode: "",
      },
    };
  },
  methods: {
    /**
     * 选中补考/前培商品
     */
    getGoodsId(row) {
      this.activeObj = {
        makeGoodsId: row.goodsId,
        makeGoodsName: row.goodsName,
        makeGoodsCode: row.code,
      };
    },
    /**
     * 初始
     */
    openBox(obj, active) {
      this.activeObj = JSON.parse(JSON.stringify(active));
      this.formData = JSON.parse(JSON.stringify(obj));
      //获取业务层次-课程
      this.getInfos();
      this.dialogVisibleTableBoxs = true;
    },
    /**
     * 搜索数据
     */
    getInfos(int) {
      //重置0
      if (int === 0) {
        this.formData.pageSize = 10;
        this.formData.pageNum = 1;
        delete this.formData.searchKey;
      }
      if (int === 1) {
        this.formData.pageNum = 1;
      }
      this.$api.inquireGoodslistGoods(this.formData).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    /**
     * 提交回调数据
     */
    submitTab() {
      this.$message.success("添加成功");
      this.dialogVisibleTableBoxs = false;
      this.$emit("backData", this.activeObj);
    },
    handleSizeChange(v) {
      this.formData.pageSize = v;
      this.formData.pageNum = 1;
      this.getInfos();
    },
    handleCurrentChange(v) {
      this.formData.pageNum = v;
      this.getInfos();
    },
  },
};
</script>

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