<template>

  <div>
    <el-dialog
      :title="brandName"
      :visible.sync="dialogVisible"
      width="1080px"
      :before-close="handleClose()">
      <el-tabs v-model="activeName">
        <el-tab-pane :label="$t('未授权客户')" name="first">
          <div class="brand">
            <el-radio-group v-model="productBrank.unauthChargingModel" @change="changeModel">
              <el-radio label="0">{{$t('统一收费标准')}}</el-radio>
              <el-radio label="1">{{$t('针对客户收费标准')}}</el-radio>
            </el-radio-group>
          </div>
         <div v-if="productBrank.unauthChargingModel==0" class="brand">
           <span>{{$t('针对所有未授权客户的收费模式')}}：</span>
           <el-select v-model="productBrank.unauthDefaultFeeType" :placeholder="$t('请选择')" size="small" style="margin-right: 10px;">
                <el-option
                  v-for="(item,index) in feeType"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
             </el-select>
             <el-button type="primary" @click="updateBrank">{{$t('确定修改')}}</el-button>
         </div>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item :label="$t('关键字')">
              <el-input v-model="list1QueryParams.customerKey" :placeholder="$t('请填入关键字')"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="filterCustomer">{{$t('查询')}}</el-button>
            </el-form-item>
          </el-form>

          <el-table
            :data="list1"
            style="width: 100%">
            <el-table-column
              prop="customerName"
              :label="$t('客户名称')">
            </el-table-column>
            <el-table-column
              prop="phone"
              :formatter="(row, column, cellValue) => '+' + cellValue"
              :label="$t('客户号码')">
            </el-table-column>
            <el-table-column
              prop="feeScale"
              :label="$t('收费类型')">
              <template slot-scope="scope">
                  <dict-tag v-if="productBrank.unauthChargingModel==1&&scope.row.feeScale" :type="DICT_TYPE.BRAND_CUSTOMER_CHARGING_MODEL" :value="scope.row.feeScale" />
                  <span v-else-if="productBrank.unauthDefaultFeeType">{{productBrank.unauthDefaultFeeType==1?$t('有牌价'):$t('中性价')}}</span>
              </template>
            </el-table-column>
            <el-table-column
              width="200px"
              :label="$t('操作')">
              <template v-slot="{row}">
                <el-button type="primary" size="mini" @click="handleAdd(row)">{{$t('添加授权')}}</el-button>
                <el-button v-if="productBrank.unauthChargingModel=='1'" type="primary" size="mini" @click="editAdd(row)">{{$t('修改收费')}}</el-button>
              </template>

            </el-table-column>
          </el-table>

          <pagination v-show="total1 > 0" :total="total1" :page.sync="list1QueryParams.pageNo" :limit.sync="list1QueryParams.pageSize"
                      @pagination="getList1" style="height: 40px"/>
        </el-tab-pane>
        <el-tab-pane :label="$t('已授权客户')" name="second">
          <el-table
            :data="list2"
            style="width: 100%">
            <el-table-column
              prop="customerName"
              :label="$t('客户名称')">
            </el-table-column>
            <el-table-column
              prop="phone"
              :formatter="(row, column, cellValue) => '+' + cellValue"
              :label="$t('客户号码')">
            </el-table-column>
            <el-table-column
              prop="fileUrl"
              :label="$t('授权证明')">
              <template v-slot="{row}">
                <div v-if="!!row.fileUrl && row.fileUrl.length > 0">
                  <span v-for="(item, index) in row.fileUrl.split(',')">
                    <a :href="item" target="_blank">{{$t('附件')}}{{ index + 1 }}</a>,
                  </span>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              prop="startTime"
              width="200px"
              :label="$t('授权时间')">
              <template v-slot="{row}">
                <span >{{row.startTime?(parseTime(row.startTime, '{y}-{m}-{d}') + ' - ' + parseTime(row.endTime, '{y}-{m}-{d}')):'永久'}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="startTime"
              width="200px"
              :label="$t('添加时间')">
              <template v-slot="{row}">
                <span >{{parseTime(row.createTime)}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="feeScale"
              :formatter="(row) => getDictDataLabel(DICT_TYPE.BRAND_CUSTOMER_CHARGING_MODEL, row.feeScale)"
              :label="$t('收费标准')">
            </el-table-column>
            <el-table-column
              prop="createUsername"
              :label="$t('添加人')">
            </el-table-column>
            <el-table-column
              width="100px"
              :label="$t('操作')">
              <template v-slot="{row}">
                <el-button type="danger" size="mini" @click="handleDelete(row.id)">{{$t('删除')}}</el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination v-show="total2 > 0" :total="total2" :page.sync="list2QueryParams.pageNo" :limit.sync="list2QueryParams.pageSize"
                      @pagination="getList2" style="height: 40px"/>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

<!--  添加弹窗  -->
    <el-dialog
      :title="$t('添加')"
      :visible.sync="addDialog.dialogVisible"
      width="600px">

      <el-form ref="form" :model="addDialog.form" label-width="80px">
        <el-form-item :label="$t('客户名称')">{{ addDialog.form.customerName }}</el-form-item>
        <el-form-item :label="$t('授权类型')">
          <dict-selector v-model="addDialog.form.authType" :type="DICT_TYPE.ECW_AUTH_TYPE"></dict-selector>
        </el-form-item>
        <el-form-item :label="$t('授权时间')" v-if="addDialog.form.authType==1">
 <!--         <el-date-picker
            v-model="addDialog.dateRange"
            @chang="handleDatePick"
            type="daterange"
            range-separator="至"
            value-format="timestamp"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker> -->
        <el-date-picker clearable v-model="addDialog.form.startTime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" type="datetime" :placeholder="$t('请选择开始日期')" />
         <span style="margin: 0 8px;">{{$t('到')}}</span>
          <el-date-picker clearable v-model="addDialog.form.endTime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" type="datetime" :placeholder="$t('请选择结束日期')" />
        </el-form-item>
        <el-form-item :label="$t('收费模式')">
          <dict-selector v-model="addDialog.form.feeScale" :type="DICT_TYPE.BRAND_CUSTOMER_CHARGING_MODEL"></dict-selector>
        </el-form-item>
        <el-form-item :label="$t('授权证明')">
          <file-upload v-model="addDialog.form.fileUrl"></file-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog.dialogVisible = false">{{$t('取消')}}</el-button>
        <el-button type="primary" @click="handleAddSubmit">{{$t('确定')}}</el-button>
      </span>
    </el-dialog>
    <!--  添加弹窗  -->
        <el-dialog
          :title="$t('修改单个客户收费模式')"
          :visible.sync="editDialog.dialogVisible"
          width="500px">
          <el-form ref="form" :model="editDialog.form" label-width="80px">
            <el-form-item :label="$t('客户名称')">{{ editDialog.customerName }}</el-form-item>

            <el-form-item :label="$t('收费模式')">
              <el-select v-model="editDialog.form.feeScale" :placeholder="$t('请选择')" size="small" style="margin-right: 10px;">
                 <el-option
                   v-for="item in feeType"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
                 </el-option>
                </el-select>
              <!-- <dict-selector v-model="editDialog.form.feeScale" :type="DICT_TYPE.BRAND_CUSTOMER_CHARGING_MODEL"></dict-selector> -->
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleEditSubmit">{{$t('确定修改')}}</el-button>
            <el-button @click="editDialog.dialogVisible = false">{{$t('关闭窗口')}}</el-button>
          </span>
        </el-dialog>
  </div>
</template>

<script>
import {
  createProductBrandEmpower,
  deleteProductBrandEmpower,
  getProductBrandEmpowerPageAuth,
  getProductBrandEmpowerPageUnauth
} from "@/api/ecw/productBrandEmpower"
import {getProductBrank,changeFeeModel,setUnauthCustomerFeeType} from "@/api/ecw/productBrank";
import DictSelector from "@/components/DictSelector"
import { DICT_TYPE, getDictDataLabel } from '@/utils/dict'
import FileUpload from '@/components/FileUpload'
import { parseTime } from '@/utils/ruoyi'

export default {
  name: "Empower",
  components: {
    DictSelector,
    FileUpload
  },
  props: {
    id: {
      type: Number,
      default: 0
    },
    brandName: String,
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      DICT_TYPE,
      getDictDataLabel,
      parseTime,
      dialogVisible: false,
      activeName: 'first',
      total1: 0,
      total2: 0,
      list1: [],
      list2: [],
      feeType:[{
        label:this.$t('有牌价'),
        value:1
      },{
        label:this.$t('中性价'),
        value:2
      }],
      unauthChargingModel:0,
      list1QueryParams: {
        pageNo: 1,
        pageSize: 10,
        customerKey: undefined
      },
      list2QueryParams: {
        pageNo: 1,
        pageSize: 10,
      },
      productBrank:{},
      addDialog: {
        dialogVisible: false,
        customerName: '',
        form: {
          "customerContactsId": 0,
          "customerId": 0,
          "endTime": "",
          "feeScale": '0',
          "fileUrl": "",
          "productBrandId": null,
          "startTime": "",
          "status": 0,
          "authType":'0'
        },
        dateRange: []
      },
      editDialog: {
        dialogVisible: false,
        customerName: '',
        form: {
          "customerContactsId": 0,
          "customerId": 0,
          "feeScale":1,
          "productBrandId": null,
        }
      }
    }
  },
  mounted() {

  },
  methods: {
    getBrank(){
      getProductBrank(this.id).then(r => {
        this.productBrank = r.data
        if(this.productBrank.unauthDefaultFeeType){
          this.productBrank.unauthDefaultFeeType = parseInt(this.productBrank.unauthDefaultFeeType)
        }
        this.unauthChargingModel = this.productBrank.unauthChargingModel
      })
    },
    handleAddSubmit(){
      this.addDialog.form.productBrandId = this.id
      createProductBrandEmpower(this.addDialog.form).then(() => {
        this.addDialog.dialogVisible = false
        this.getList1()
        this.getList2()
        this.resetForm("form");
      })
    },
    handleEditSubmit(){
      var data = {}
      data = this.editDialog.form
      data.productBrandId = this.id
      setUnauthCustomerFeeType(data).then(() => {
        this.getList1()
        this.editDialog = {
          dialogVisible: false,
          customerName: '',
          form: {
            "customerContactsId": 0,
            "customerId": 0,
            "feeScale":1,
            "productBrandId": null,
          }
        }
      })
    },
    handleDatePick(e){
      console.log(e)
    },
    handleClose() {},
    filterCustomer() {
      this.list1QueryParams.pageNo = 1
      this.getList1()
    },
    updateBrank(){
      let params = {}
       if(this.productBrank.unauthChargingModel==1){
         params = {
             id:this.productBrank.id,
             unauthChargingModel:this.productBrank.unauthChargingModel,
           }
       }else{
         params = {
             id:this.productBrank.id,
             unauthChargingModel:this.productBrank.unauthChargingModel,
             unauthDefaultFeeType:this.productBrank.unauthDefaultFeeType
           }
       }
       console.log(params)
       changeFeeModel(params).then(r=>{
         this.getList1()
         this.getList2()
         this.getBrank()
         this.$modal.msgSuccess(this.$t("修改成功"));
       })
    },
    changeModel(){
      if(this.productBrank.unauthChargingModel==1&&this.unauthChargingModel != this.productBrank.unauthChargingModel){
        this.updateBrank()
      }
    },
    handleAdd(row) {
      this.addDialog.form.customerId = row.customerId
      this.addDialog.form.customerName = row.customerName
      this.addDialog.dialogVisible = true
    },
    editAdd(row){
      this.editDialog.form.customerId = row.customerId
      if(row.customerContactsId){
          this.editDialog.form.customerContactsId = row.customerContactsId
      }
      this.editDialog.customerName = row.customerName
      this.editDialog.dialogVisible = true
    },
    handleDelete(id) {
      this.$confirm(this.$t('确认删除该用户的授权')+'?', this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(() => {
        deleteProductBrandEmpower(id).then(r => {
          this.getList1()
          this.getList2()
          this.$message({
            type: 'success',
            message: this.$t('撤销授权成功')
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('已取消删除')
        });
      });
    },
    getList1(){
      getProductBrandEmpowerPageUnauth({...this.list1QueryParams, productBrandId: this.id}).then(r => {
        this.list1 = r.data.list
        this.total1 = r.data.total
      })
    },
    getList2() {
      getProductBrandEmpowerPageAuth({...this.list2QueryParams, productBrandId: this.id}).then(r => {
        this.list2 = r.data.list
      })
    }
  },
  watch: {
    visible(v){
      if (v){
        this.list1QueryParams.pageNo = 1
        this.list2QueryParams.pageNo = 1
        this.unauthDefaultFeeType = "1"
        this.list1QueryParams.customerKey = ''
        this.getList1()
        this.getList2()
        this.getBrank()
      }
      this.dialogVisible = v
    },
    dialogVisible(v) {
      this.$emit('update:visible', v)
    },

    'addDialog.dateRange'(v) {
      this.addDialog.form.startTime = v[0]
      this.addDialog.form.endTime = v[1]
    }
  }
}
</script>

<style scoped>
.brand{
  padding-bottom: 20px;
}
</style>