<template>
  <div class="divBox">
    <!--主要内容-->
    <el-card class="box-card">
      <!--顶部搜索-->
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form size="small" label-width="100px" :inline="true">
            <el-form-item label="关键字：" label-width="120px" style="display: inline-block;">
              <el-input v-model="tableFrom.keyword" @keyup.enter.native="getList(1)" placeholder="请输入店铺关键字/店铺名/联系电话" class="selWidth">
                <el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1)" />
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!--列表-->
      <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="small" highlight-current-row class="switchTable">
        <el-table-column prop="mer_id" label="ID" min-width="60" align="center"/>
        <el-table-column prop="mer_name" :label="merchantTitle + '名称'" min-width="150" align="center"/>
        <el-table-column label="冠名品牌额度" align="center">
          <el-table-column prop="title_brand_total" label="补货总量" min-width="100" align="center"/>
          <el-table-column prop="title_brand_limit" label="总额度" min-width="100" align="center"/>
          <el-table-column prop="title_brand_used" label="已使用" min-width="100" align="center"/>
          <el-table-column label="剩余可用" min-width="100" align="center">
            <template slot-scope="scope">
              {{ (scope.row.title_brand_limit - scope.row.title_brand_used).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="其他品牌额度" align="center">
          <el-table-column prop="other_brand_total" label="补货总量" min-width="100" align="center"/>
          <el-table-column prop="other_brand_limit" label="总额度" min-width="100" align="center"/>
          <el-table-column prop="other_brand_used" label="已使用" min-width="100" align="center"/>
          <el-table-column label="剩余可用" min-width="100" align="center">
            <template slot-scope="scope">
              {{ (scope.row.other_brand_limit - scope.row.other_brand_used).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="操作" min-width="150" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="changeQuotaShow(scope.row)">额度变更</el-button>
            <el-button type="text" size="small" @click="changeRecordShow(scope.row)">变更明细</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination :page-size="tableFrom.limit" :current-page="tableFrom.page" :total="tableData.total" @current-change="pageChange" />
    </el-card>
    <!--额度变更弹框-->
    <el-dialog title="补货额度变更" :visible.sync="changeQuotaDiaLogStatus" width="800px" :before-close="changeQuotaClose">
      <!--变更表单-->
      <el-form :model="changeInfo" ref="changeInfoFrom" :rules="changeInfoRules" label-width="120px">
        <el-form-item label="变更类型" prop="change_type" >
          <el-radio-group v-model="changeInfo.change_type">
            <el-radio :label="0">减少</el-radio>
            <el-radio :label="1">增加</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="变更类型" prop="change_type" >
          <el-radio-group v-model="changeInfo.quota_type">
            <el-radio :label="0">冠名品牌额度</el-radio>
            <el-radio :label="1">其他品牌额度</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="变更数量" prop="quantity">
          <el-input type="number" step="0.01" v-model="changeInfo.quantity" clearable maxlength="8" />
        </el-form-item>
      </el-form>
      <!-- 底部按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeQuotaClose">取 消</el-button>
        <el-button type="primary" @click="changeQuotaSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <!--额度变更记录弹框-->
    <el-dialog title="变更明细" :visible.sync="changeRecordDiaLogStatus" width="1200px" :before-close="changeRecordClose">
      <!--列表-->
      <el-table v-loading="recordLoading" :data="recordTableData.data" style="width: 100%" size="small" highlight-current-row class="switchTable">
        <el-table-column prop="mer_id" label="ID" min-width="60" align="center"/>
        <el-table-column label="变更类型" min-width="80" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.change_type == 1" type="success" effect="dark">增加</el-tag>
            <el-tag v-else type="danger" effect="dark">减少</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="变更前数量" prop="change_front" min-width="120" align="center"/>
        <el-table-column label="变更数量" prop="change_quantity" min-width="120" align="center"/>
        <el-table-column label="变更后数量" prop="change_after" min-width="120" align="center"/>
        <el-table-column label="变更额度类型" min-width="80" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.quota_type == 0">冠名品牌总额度</el-tag>
            <el-tag v-else-if="scope.row.quota_type == 1">其他品牌总额度</el-tag>
            <el-tag v-else-if="scope.row.quota_type == 2">冠名品牌可用额度</el-tag>
            <el-tag v-else-if="scope.row.quota_type == 3">其他品牌可用额度</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="变更来源" min-width="150" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.source == 0">后台手动处理</div>
            <div v-else-if="scope.row.source == 1">补货减少</div>
            <div v-else-if="scope.row.source == 2">售出增加</div>
            <div v-else-if="scope.row.source == 3">配送商缴费增加</div>
            <div v-else-if="scope.row.source == 4">补货订单取消/退款增加</div>
            <div v-else-if="scope.row.source == 5">用户订单取消/退款减少</div>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
        :page-size="recordTableFrom.limit"
        :current-page="recordTableFrom.page"
        :total="recordTableData.total"
        @current-change="pageChangeRecord" />
      <!-- 底部按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeQuotaClose">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {merchantTypeText} from "@/filters";
import {merQuotaList, merQuotaChange, merQuotaChangeRecord} from "@/api/merchant";

export default {
  name: "MerchantQuotaList",
  components: {  },
  data() {
    return {
      merchantTitle: '商户',
      listLoading: true,
      // 搜索项
      tableFrom: {
        page: 1,
        limit: 10,
        merchant_type: '',// 商户类别：0=普通商户，1=酒道馆，2=供应商，3=烟酒店，4=超市，5=省公司门店，6=城市会客厅，7=惠民健康体检馆
        keyword: '',
      },
      // 列表
      tableData: {
        data: [],
        total: 0
      },
      // 额度变更
      currentInfo: {},
      changeQuotaDiaLogStatus: false,
      changeInfo: {
        change_type: 1,// 变更类型：0=减少，1=增加
        quota_type: 0,// 额度类型：0=冠名品牌额度，1=其他品牌额度
        quantity: '',// 变更数量
      },
      changeInfoRules: {
        quantity: [
          {
            required: true, validator: function (rule, value, callback) {
              if (Number(value) <= 0) {
                callback(new Error('变更数量必须大于0！'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ],
      },
      // 变更明细
      changeRecordDiaLogStatus: false,
      recordLoading: false,
      recordTableFrom: {
        page: 1,
        limit: 10,
        mer_id: '',
      },
      recordTableData: {
        data: [],
        total: 0
      },


    };
  },
  watch: {
    // 路由变更
    '$route' () {
      this.tableFrom.merchant_type = this.$route.meta.merchant_type || 0;
    },
    // 商户类型变更
    'tableFrom.merchant_type' () {
      this.merchantTitle = merchantTypeText(this.tableFrom.merchant_type);
      this.getList("");
    },
  },
  mounted() {
    this.tableFrom.merchant_type = this.$route.meta.merchant_type || 0;
  },
  methods: {
    // 列表
    getList(num) {
      this.listLoading = true;
      this.tableFrom.page = num ? num : this.tableFrom.page;
      merQuotaList(this.tableFrom).then(res => {
        this.tableData.data = res.data.list;
        this.tableData.total = res.data.count;
        this.listLoading = false;
      }).catch(res => {
        this.listLoading = false;
        this.$message.error(res.message);
      });
    },
    pageChange(page) {
      this.getList(page);
    },
    // 额度变更 - 显示弹框
    changeQuotaShow(info){
      let _this = this;
      _this.currentInfo = info || {};
      _this.changeQuotaDiaLogStatus = true;
    },
    // 额度变更 - 关闭弹框
    changeQuotaClose(){
      let _this = this;
      _this.currentInfo = {};
      _this.changeInfo = _this.$options.data().changeInfo;
      _this.changeQuotaDiaLogStatus = false;
    },
    // 额度变更 - 提交变更
    changeQuotaSubmit(){
      let _this = this;
      let changeInfo = Object.assign({}, _this.changeInfo);
      changeInfo.mer_id = _this.currentInfo.mer_id || 0;
      // 提交
      _this.$refs['changeInfoFrom'].validate(valid => {
        if (valid) {
          // 提示内容
          let changeTypeText = changeInfo.change_type == 1 ? '增加' : '减少';
          let quotaType = changeInfo.quota_type == 0 ? '冠名品牌' : '其他品牌';
          let tips = '是否确认'+ changeTypeText +'当前' + _this.merchantTitle + quotaType + '补货总额度';
          this.$confirm(tips, '提示', {
            confirmButtonText: '确认' + changeTypeText,
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            merQuotaChange(changeInfo).then(res => {
              _this.getList('');
              _this.$message.success(res.message);
              _this.changeQuotaClose();
            }).catch(res => {
              _this.loading = false;
              _this.$message.error(res.message);
            });
          }).catch(() => {});
        }
      });
    },
    // 变更明细 - 显示弹框
    changeRecordShow(info){
      let _this = this;
      _this.currentInfo = info || {};
      _this.recordTableFrom.mer_id = info.mer_id || 0;
      _this.getRecordList(1);
      _this.changeRecordDiaLogStatus = true;
    },
    // 变更明细 - 关闭弹框
    changeRecordClose(){
      let _this = this;
      _this.currentInfo = {};
      _this.changeRecordDiaLogStatus = false;
    },
    // 变更明细 - 列表
    getRecordList(num) {
      this.recordLoading = true;
      this.recordTableFrom.page = num ? num : this.recordTableFrom.page;
      merQuotaChangeRecord(this.recordTableFrom).then(res => {
        this.recordTableData.data = res.data.list;
        this.recordTableData.total = res.data.count;
        this.recordLoading = false;
      }).catch(res => {
        this.recordLoading = false;
        this.$message.error(res.message);
      });
    },
    pageChangeRecord(page) {
      this.getRecordList(page);
    },




  }
};
</script>

<style scoped lang="scss">
/deep/ .cell{
  padding: 0!important;
}
</style>
