<!--商品调价单-->
<template>
  <div class="blank-view">
    <el-table :data="tableData">
      <el-table-column
        prop="no"
        label="调价单编码"
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="goodsName"
        label="商品名称"
        min-width="180"
      ></el-table-column>
      <el-table-column
        v-if="timeFlag"
        prop="createTime"
        label="调价日期"
        min-width="160"
      >
        <template slot-scope="scope">
          {{ $_common.formatDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="priceFlag"
        label="调整后价格"
        width="100"
        type="expand"
      >
        <template slot-scope="scope">
          <ul class="sku-ul">
            <li
              v-for="(item, index) in scope.row.salePrice"
              :key="index"
              class="sku-li"
            >
              <div class="clearfix">
                <div class="sku-info float_left">
                  <p>
                    <span class="label">规格:</span>
                    {{ item.unitName }};
                    <span
                      v-for="(itemS, indexS) in item.specGroup"
                      :key="indexS"
                    >
                      {{ itemS.specValueName }};
                    </span>
                  </p>
                  <p>
                    <span class="label">市场价:</span>
                    ¥{{ item.marketPrice }}
                  </p>
                  <p>
                    <span class="label">阶梯价:</span>
                    {{ item.enabledLadder === 1 ? "是" : "否" }}；
                  </p>
                  <p v-if="!item.enabledLadder">
                    <span class="label">销售价:</span>
                    ¥{{ item.salePrice }}
                  </p>
                </div>
              </div>
              <div v-if="item.enabledLadder" class="clearfix">
                <div class="float_left" style="width: 50px">销售价:</div>
                <div class="float_left">
                  <p v-for="(price, indexP) in item.ladderPrice" :key="indexP">
                    <span>
                      数量:
                      <span style="color: #ff4040">
                        {{ price.from }}-{{
                          indexP === item.ladderPrice.length - 1
                            ? "∞"
                            : price.to
                        }}
                      </span>
                      ,
                    </span>
                    <span>
                      价格:
                      <span style="color: #ff4040">¥{{ price.price }}</span>
                      ;
                    </span>
                  </p>
                </div>
              </div>
            </li>
          </ul>
        </template>
      </el-table-column>
      <el-table-column
        v-if="personFlag"
        prop="createUserName"
        label="调价人"
        min-width="100"
      ></el-table-column>
      <el-table-column
        v-if="storeFlag && systemType === 1"
        prop="shopName"
        label="相关商铺"
        show-overflow-tooltip
        min-width="160"
      ></el-table-column>
      <el-table-column
        v-if="stateFlag"
        prop="effectiveStatus"
        label="状态"
        min-width="100"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.effectiveStatus === 2" class="success-status">
            已生效
          </span>
          <span
            v-else-if="scope.row.effectiveStatus === 4"
            class="warning-status"
          >
            审核中
          </span>
          <span v-else class="info-status">未生效</span>
        </template>
      </el-table-column>
      <el-table-column prop="tag" label="管理" width="120" fixed="right">
        <template slot="header" slot-scope="scope">
          <span v-if="false">{{ scope.$index }}</span>
          <span class="operation">管理</span>
          <el-popover popper-class="custom-table-checkbox" trigger="click">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="(item, index) in columns"
                :key="index"
                :label="item.label"
                @change="change"
              ></el-checkbox>
            </el-checkbox-group>
            <el-button
              slot="reference"
              icon="el-icon-setting"
              type="text"
            ></el-button>
          </el-popover>
        </template>
        <template slot-scope="scope">
          <el-button
            v-if="$accessCheck($Access.AdjustPriceEffective)"
            type="text"
            :disabled="scope.row.effectiveStatus !== 1"
            @click="effectivePrice(scope.row)"
          >
            生效
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <FooterPage
      :page-size="pageSize"
      :total-page.sync="total"
      :current-page.sync="page"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
    ></FooterPage>
  </div>
</template>

<script>
  import FooterPage from "@/component/common/FooterPage";
  import {
    PriceAdjustmentEffective,
    getAllSearch,
    exportPriceAdjustment,
  } from "@/api/Price";
  export default {
    name: "AdjustPrice",
    components: {
      FooterPage,
    },
    props: {
      searchForm: {
        type: Object,
        default: () => {
          return {
            time: [],
            startTime: "",
            endTime: "",
            effectiveStatus: "",
            keyword: "",
          };
        },
      },
    },
    data() {
      return {
        table_index: "",
        price_data: {},
        total: 0,
        page: 1,
        pageSize: 10,
        tableData: [],
        search_form: {
          time: [],
          startTime: "",
          endTime: "",
          effectiveStatus: "",
          keyword: "",
        },
        checkList: ["调价日期", "调整后价格", "调价人", "相关店铺", "状态"],
        columns: [
          {
            label: "调价日期",
          },
          {
            label: "调整后价格",
          },
          {
            label: "调价人",
          },
          {
            label: "相关店铺",
          },
          {
            label: "状态",
          },
        ],
        timeFlag: true,
        priceFlag: true,
        personFlag: true,
        storeFlag: true,
        stateFlag: true,
      };
    },
    created() {
      this.search_form = this.searchForm;
      this.getAllSearch();
    },
    activated() {
      if (this.$_isInit()) return;
      this.getAllSearch();
    },
    methods: {
      // 切页
      pageChange(val) {
        this.page = val;
        this.getAllSearch();
      },
      // 每页数据大小改变
      sizeChange(val) {
        this.pageSize = val;
        this.pageChange(1);
      },
      effectivePrice(row) {
        this.$confirm("确定要将该调价单生效吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          const data = await PriceAdjustmentEffective(row.id, {
            createTime: row.createTime,
            effectiveUserName: this.userName,
          });

          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.getAllSearch();
        });
      },
      //  搜索
      async getAllSearch(exports) {
        let params = {
          keyword: this.search_form.keyword,
          startTime: this.search_form.startTime,
          endTime: this.search_form.endTime,
          effectiveStatus: this.search_form.effectiveStatus,
          page: this.page,
          pageSize: this.pageSize,
        };
        if (exports) {
          params.export = 1;
          const data = await exportPriceAdjustment({
            ...params,
          });
        } else {
          const data = await getAllSearch({
            ...params,
          });
          this.tableData = data.data;
          this.total = data.pageTotal;
        }
      },
      change() {
        this.timeFlag = this.checkList.some((item) => item === "调价日期");
        this.priceFlag = this.checkList.some((item) => item === "调整后价格");
        this.personFlag = this.checkList.some((item) => item === "调价人");
        this.storeFlag = this.checkList.some((item) => item === "相关店铺");
        this.stateFlag = this.checkList.some((item) => item === "状态");
      },
    },
  };
</script>

<style scoped lang="scss">
  .custom-table-checkbox {
    .el-checkbox {
      display: block !important;
      margin: 0 0 $base-padding/4 0;
    }
  }
  .sku-ul {
    .sku-li {
      display: inline-block;
      margin-bottom: 10px;
      margin-right: 10px;
      border: 1px solid #ebeef5;
      padding: 10px;
      width: 294px;
      vertical-align: middle;
      .sku-img {
        width: 50px;
        margin-right: 8px;
      }
      .sku-info {
        line-height: 23px;
        color: #111111;
        .label {
          display: inline-block;
          width: 50px;
          color: #666666;
          text-align: right;
        }
      }
    }
  }
</style>
