<template>
  <div class="app-container">
   <div class="app-container-search main-bgcolor main-radius">
      <h1 class="">生码管理</h1>
      <br />
      <!-- 搜索工作栏 -->
      <SearchInfo
        ref="searchForm"
        :searchFormParam="{ queryParams, dataSource }"
        :showSearch.sync="showSearch"
        @handleQuery="handleQuery"
        @resetQuery="resetQuery"
      ></SearchInfo>
    </div>

    <!-- 列表 -->
    <div class="app-container-list main-bgcolor main-radius">
      <h1>生码列表</h1>
      <el-table v-loading="loading" :data="list">
        <el-table-column label="编号" align="center" type="index" width="80" >
          <template v-slot="{ $index }">
            <span>{{($index+1)+ (queryParams.pageNo-1)*queryParams.pageSize }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商户名称" align="center" prop="businessName">
          <template slot-scope="{ row }">
              <div>
                <span>{{ row.businessName }}</span>
                <el-button type="text" icon="el-icon-copy-document" @click.stop="copyContent(row.businessName)"></el-button>
              </div>
          </template>
        </el-table-column>
        <el-table-column label="商户标识码" align="center" prop="businessId" />
        <el-table-column label="备注" align="center" prop="remarks" :show-overflow-tooltip="true"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="{ row }">
            <el-button type="text" @click="handleAdds(row)" style="margin-left: 16px;">生成码包</el-button>
            <el-button type="text" @click="goToRecord(row)" style="margin-left: 16px;">生成记录</el-button>
          </template>
        </el-table-column>
        <div slot="empty">
          <EmptyBound />
        </div>
      </el-table>
      <!-- 分页组件 -->
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                  @pagination="getList"/>
    </div>

    <!-- 抽屉-弹窗 -->
    <el-drawer
      :title="title"
      :visible.sync="openDraw"
      :direction="direction"
      custom-class="drawer"
      :before-close="handleClose">
      <div class="drawerContent">
        <el-form ref="form" :rules="rules" :model="form" label-width="300px">
          <div class="drawerTitle">生码信息</div>
          <el-form-item label="字符长度 (起止:18-20位)" prop="charLength">
            <el-slider class="drawerslider" :min="18" :max="20" v-model="form.charLength"></el-slider>
          </el-form-item>
          <div class="drawerTitle">生码结果</div>
          <el-form-item label="字符类型" prop="charType">
            <el-radio-group class="drawer-radio" v-model="form.charType">
              <el-radio :label="0">纯数字</el-radio>
              <el-radio :label="1">纯字母</el-radio>
              <el-radio :label="2">混合类型</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="生码结果示例" prop="codeRuleFormat">
            <div>{{filterText()}}</div>
          </el-form-item>
          <el-form-item label="生码数量" prop="codeNum">
            <el-input type="number" @input.native="onCodeNumInput" v-model="form.codeNum" placeholder="单次上限500个"></el-input>
          </el-form-item>
          <el-form-item label="采收批次" prop="batchId">
            <el-select ref="batchId" class="w100" @change="changeBatchId" :placeholder="placeholderBatchId" v-model="form.batchId" filterable>
              <el-option
              v-for="(item,index) in batchList"
              :key="index"
              :label="item.harvestBatchId"
              :value="item.harvestBatchId"
              :goodsId="item.goodsId"
              :businesslnfold="item.belongBusinessId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="经销商" prop="dealerId">
            <el-select ref="dealerId" class="w100" :placeholder="placeholderDealerId" v-model="form.dealerId">
              <el-option
              v-for="(item,index) in dealerList"
              :key="index"
              :label="item.dealerName"
              :value="item.dealerId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="drawer-footer">
          <el-button type="primary" @click="submitForm">生 成</el-button>
          <el-button @click="openDraw = false">取 消</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import SearchInfo from '@/components/Customer/SearchForm'
import EmptyBound from '@/components/EmptyTable'
import { getBusinessInfoPage } from "@/api/basic/businessInfo";
import { createGenerateRecord } from '@/api/identity/generateRecord';
import { getBlockState } from '@/api/product/harvestBatch';
import { getDealerInfoByGoodsId } from '@/api/basic/dealerInfo';
export default {
  name: "GenerateRecord",
  components: {
    SearchInfo,
    EmptyBound,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 标识码生成记录列表
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openDraw: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        belongBusinessName: null,
      },
      dataSource: [
       {
          key: 'businessName', //商户名称
          itemType: 'input',
          label: '商户名称',
          placeholder: '请输入',
          onEnterKeyUp: this.handleQuery,
        },
      ],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        generateRecordId: [{ required: true, message: "记录编码不能为空", trigger: "blur" }],
        ruleId: [{ required: true, message: "码规则id不能为空", trigger: "blur" }],
        codeType: [{ required: true, message: "码类型 0普通码 1明暗码不能为空", trigger: "blur" }],
        charType: [{ required: true, message: "字符类型 0纯数字  1纯字母  2混合类型不能为空", trigger: "change" }],
        codeNum: [{ required: true, message: "数量不能为空", trigger: "change" }],
        batchId: [{ required: true, message: "采收批次不能为空", trigger: "change" }],
        dealerId: [{ required: true, message: "经销商不能为空", trigger: "change" }],
        state: [{ required: true, message: "状态 0：生成中  1：已生成文字码，未生成图片码  2：文字及图片码均生成不能为空", trigger: "blur" }],
        businessId: [{ required: true, message: "所属商户id不能为空", trigger: "blur" }],
        businessName: [{ required: true, message: "所属商户名称不能为空", trigger: "blur" }],
      },
      direction: 'rtl',// 抽屉-弹窗放向
      drawerTypeTip: `普通码：无需验证，即扫即查 <br> 明暗码：带验证码的二维码，扫码后<br>需输入正确的验证码才能查询`,
      batchList: [],
      codeTypeList: [
        {
          label: '普通码',
          value: 0,
        },
        {
          label: '明暗码',
          value: 1,
        }
      ],
      placeholderBatchId: '请选择采收批次',
      dealerList: [],
      placeholderDealerId: '请先选择采收批次',
    };
  },
  created() {
    this.getList();
  },
  methods: {
    filterText(){
      switch (this.form.charType){
        case 0:
          return 'http://taas.mychain.com/trace?id=5566';
        case 1:
          return 'http://taas.mychain.com/trace?id=aabb';
        case 2:
          return 'http://taas.mychain.com/trace?id=55bb';
        default:
          return;
      }
    },
    onCodeNumInput() {
      if (this.form.codeNum > 500) {
        this.form.codeNum = 500;
      }
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 执行查询
      getBusinessInfoPage(this.queryParams).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 取消按钮 */
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 表单重置 */
    reset(row) {
      this.form = {
        id: undefined,
        businessId: undefined,
        businessName: undefined,
        codeRuleId: undefined,
        codeRuleName: undefined,
        codeType: undefined,
        codeRuleFormat: undefined,
        charType: 0,
        charLength: 18,
        dealerId: undefined,
      };
      if(row){
        this.form = Object.assign(this.form,{
          businessId: row.id,
          businessName: row.businessName,
          ruleId: row.id,
          ...row
        });
      }
      this.resetForm("form");

    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm", "searchForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    async handleAdds(row) {
      this.reset(row);
      this.open = false;
      this.openDraw = true;
      this.title = "生成码包";
      let res = await getBlockState({belongBusinessld: row.businessId,blockState: 1});
      this.placeholderBatchId = '暂无可选批次';
      if(res.data.length > 0){
        this.placeholderBatchId = '请选择批次';
        this.batchList = res.data;
      }
      console.log('批次列表',res);
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (!valid) {
          return;
        }
        // 添加的提交
        createGenerateRecord(this.form).then(res => {
          if(res.data){
            this.$modal.msgSuccess("新增成功");
            this.open = false;
            this.openDraw = false;
            this.getList();
          }
        });
      });
    },
    // 关闭-弹窗
    handleClose(){
      this.openDraw = false;
      this.reset();
    },

    changeBatchId(e){
      this.$nextTick(()=>{
        let goodsId = this.$refs.batchId.selected.$attrs.goodsId;
        let businessInfoId = this.$refs.batchId.selected.$attrs.businesslnfold;
        this.form.dealerId = '';
        getDealerInfoByGoodsId({
          businessInfoId,
          goodsId,
        }).then((res)=>{
          this.placeholderDealerId = '暂无可选经销商';
          if(res.data){
            this.placeholderDealerId = '请选择经销商';
            this.dealerList = res.data;
          }
          console.log('经销商列表',res);
        });
      });
    },

    goToRecord(row) {
      this.$router.push({
        path: '/code/scan-record',
        query: {
          businessName: row.businessName,
        },
      });
    },
  }
};
</script>
<style lang="scss">
  .drawer{
    width: 500px !important;
    box-sizing: border-box;
    .el-drawer__header{
      padding: 16px 24px;
      margin: 0;
      display: flex;
      flex-direction: row-reverse;
      border-bottom: 1px solid rgb(247, 247, 247);
      .el-drawer__close-btn{
        margin-right: 12px;
        height: 22px;
        width: 28px;
      }
      span{
        font-size: 16px;
      }
    }

    .drawerContent{
      padding: 24px 24px 60px;
      position: relative;
      .drawerTitle{
        font-size: 16px;
        padding-bottom: 16px;
      }

      .el-form-item{
        display: flex;
        flex-direction: column;
        justify-content: left;
        margin-bottom: 14px;
        .el-form-item__label{
          text-align: left;
          line-height: 22px;
          padding-bottom: 8px;
          color: rgba(0, 0, 0, .6);
        }
        .el-form-item__content{
          margin-left: 0px !important;

          input::-webkit-outer-spin-button,
              input::-webkit-inner-spin-button {
              -webkit-appearance: none;
          }
          input[type="number"]{
              -moz-appearance: textfield;
          }
        }
        .el-icon-warning-outline{
          font-size: 14px;
        }
      }

      .drawerslider{
        width: 220px;
        .el-slider__runway{
          height: 4px;
          .el-slider__bar{
            height: 100%;
          }
          .el-slider__button{
            width: 12px;
            height: 12px;
          }
        }
      }

      .drawer-footer{
        position: fixed;
        bottom: 0;
        right: 0;
        width: 500px;
        height: 53px;
        background-color: white;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        border-top: 1px solid rgb(233, 233, 233);
        padding-right: 12px;
        button{
          padding: 0;
          line-height: 32px;
          height: 32px;
          width: 64px;
          font-size: 14px;
          margin: 0 4px;
        }
      }
    }

  }
</style>
