<!--客户类型调价单-->
<template>
  <div class="blank-view">
    <el-table :data="tableData">
      <el-table-column
        prop="id"
        label="ID"
        fixed="left"
        width="50"
      ></el-table-column>
      <el-table-column
        prop="no"
        label="调价单编码"
        min-width="160"
      ></el-table-column>
      <el-table-column
        v-if="clientTypeFlag"
        prop="customerName"
        label="客户类型"
        min-width="100"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="goodsCode"
        label="商品编码"
        min-width="130"
      ></el-table-column>
      <el-table-column
        prop="goodsName"
        label="商品名称"
        show-overflow-tooltip
        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="调整价格"
        type="expand"
        width="100"
      >
        <template slot-scope="scope">
          <ul class="sku-ul">
            <li
              v-for="(item, index) in scope.row.salePrice"
              :key="index"
              class="sku-li"
            >
              <div class="sku-info">
                <p>
                  <span class="label">规格:</span>
                  {{ item.unitName }};
                  <span v-for="(itemU, indexU) in item.specGroup" :key="indexU">
                    {{ itemU.specValueName }};
                  </span>
                </p>
                <div v-if="item.ladderPrice && item.ladderPrice.length">
                  <span class="label">调整价格:</span>
                  <div style="display: inline-block; vertical-align: middle">
                    <div
                      v-for="(price, pi) in item.ladderPrice"
                      :key="pi"
                      class="ladder-li"
                    >
                      <span class="price-span">{{ price.from }}</span>
                      <span style="font-size: 12px; margin: 0 4px">至</span>
                      <span class="price-span">
                        {{
                          pi === item.ladderPrice.length - 1 ? "∞" : price.to
                        }}
                      </span>
                      =
                      <span style="margin-right: 5px" class="price-span">
                        <span v-if="parseInt(price.adjPricetag) === 1">
                          {{ $NP.minus(price.price, price.adjPrice) }}
                        </span>
                        <span v-else-if="parseInt(price.adjPricetag) === 2">
                          {{ $NP.plus(price.price, price.adjPrice) }}
                        </span>
                        <span v-else-if="parseInt(price.adjPricetag) === 3">
                          {{ $NP.times(price.price, price.adjPrice) }}
                        </span>
                        <span v-else>
                          {{ price.price }}
                        </span>
                      </span>
                      <span
                        style="margin-right: 5px"
                        class="price-span"
                        :class="
                          parseInt(item.adjPricetag) === 1
                            ? 'danger-color'
                            : parseInt(item.adjPricetag) === 2
                            ? 'success-color'
                            : 'primary-color'
                        "
                      >
                        {{
                          parseInt(price.adjPricetag) === 1
                            ? "-"
                            : parseInt(price.adjPricetag) === 2
                            ? "+"
                            : "*"
                        }}{{ price.adjPrice }}
                      </span>
                    </div>
                  </div>
                </div>
                <p v-else>
                  <span class="label">调整价格:</span>
                  <span
                    :class="
                      parseInt(item.adjPricetag) === 1
                        ? 'danger-color'
                        : parseInt(item.adjPricetag) === 2
                        ? 'success-color'
                        : 'primary-color'
                    "
                  >
                    {{
                      parseInt(item.adjPricetag) === 1
                        ? "-"
                        : parseInt(item.adjPricetag) === 2
                        ? "+"
                        : "*"
                    }}¥{{ item.price }}
                  </span>
                </p>
              </div>
            </li>
          </ul>
        </template>
      </el-table-column>
      <el-table-column
        v-if="pricingPeopleFlag"
        prop="createUserName"
        label="调价人"
        min-width="120"
      ></el-table-column>
      <el-table-column
        v-if="stateFlag"
        prop="effectiveStatus"
        label="状态"
        min-width="110"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.effectiveStatus === 2" class="success-status">
            已生效
          </span>
          <span v-else class="danger-status">未生效</span>
        </template>
      </el-table-column>
      <el-table-column label="管理" min-width="120" header- 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="
              scope.row.effectiveStatus === 1 &&
              $accessCheck($Access.CustomerTypeAdjEffective)
            "
            type="text"
            @click="effectivePrice(scope.row.id, scope.row.createTime)"
          >
            生效
          </el-button>
          <!--          <el-button v-else type="text" @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 {
    effectiveCustomerTypePriceAdjustment,
    getAllCustomerTypePriceAdjustment,
  } from "@/api/Price";

  export default {
    name: "CostumeTypeAdjustPrice",
    props: {
      searchForm: {
        type: Object,
        default: () => {
          return {
            time: [],
            startTime: "",
            endTime: "",
            effectiveStatus: "",
            keyword: "",
          };
        },
      },
    },
    data() {
      return {
        total: 0,
        page: 1,
        pageSize: 10,
        price_title: "",
        price_type: "全国销售价",
        depotData: [],
        tableData: [],
        search_form: {
          time: [],
          startTime: "",
          endTime: "",
          effectiveStatus: "",
          keyword: "",
        },
        price_status_list: [
          {
            label: "全部",
            value: 0,
          },
          {
            label: "已生效",
            value: 2,
          },
          {
            label: "未生效",
            value: 1,
          },
        ],
        checkList: ["客户类型", "调价日期", "调整价格(元)", "调价人", "状态"],
        columns: [
          {
            label: "客户类型",
          },
          {
            label: "调价日期",
          },
          {
            label: "调整价格(元)",
          },
          {
            label: "调价人",
          },
          {
            label: "状态",
          },
        ],
        clientTypeFlag: true,
        timeFlag: true,
        priceFlag: true,
        pricingPeopleFlag: true,
        stateFlag: true,
      };
    },
    created() {
      this.search_form = this.searchForm;
      this.getList();
    },
    activated() {
      if (this.$_isInit()) return;
      this.getList();
    },
    methods: {
      // 切页
      pageChange(val) {
        this.page = val;
        this.getList();
      },
      // 每页数据大小改变
      sizeChange(val) {
        this.page = 1;
        this.pageSize = val;
        this.getList();
      },
      effectivePrice(id, createTime) {
        this.$confirm("确定要将该调价单生效吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          const { data } = await effectiveCustomerTypePriceAdjustment(id, {
            createTime: createTime,
            effectiveUserName: this.userName,
          });

          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.getList();
        });
      },
      async getList() {
        let params = {
          page: this.page,
          pageSize: this.pageSize,
          keyword: this.search_form.keyword,
          startTime: this.search_form.startTime,
          endTime: this.search_form.endTime,
          effectiveStatus: this.search_form.effectiveStatus,
        };
        const { data, pageTotal } = await getAllCustomerTypePriceAdjustment({
          ...params,
        });

        this.tableData = data;
        this.total = pageTotal;
      },
      change() {
        this.clientTypeFlag = this.checkList.some(
          (item) => item === "客户类型"
        );
        this.timeFlag = this.checkList.some((item) => item === "调价日期");
        this.priceFlag = this.checkList.some((item) => item === "调整价格(元)");
        this.pricingPeopleFlag = 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-right: 10px;
      margin-bottom: 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: 60px;
          color: #666666;
          text-align: right;
        }
      }
    }
  }
  .ladder-li {
    margin-top: 5px;
    .price-span {
      width: 40px;
      text-align: center;
      line-height: 30px;
      display: inline-block;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      background-color: #ffffff;
    }
  }
</style>
