<template>
  <div>
    <el-form v-loading="loadingFrom" ref="dataForm" :inline="true" :model="dataForm" label-width="120px" :rules="rules">
      <el-form-item label="" class="el-alert">
        <el-alert title="商户登录账号为手机号，初始密码为000000，可从个人中心修改密码" type="warning" effect="dark">
        </el-alert>
      </el-form-item>
      <el-form-item label="商户名称" prop="name" class="lang">
        <!-- <el-input
          v-model.trim="dataForm.name"
          :maxlength="isCn ? '8' : '16'"
          :disabled="isDisabled"
          placeholder="请输入商户名称"
        /> -->
        <el-input
          v-model.trim="dataForm.name"
          :maxlength="50"
          :disabled="isDisabled"
          placeholder="请输入商户名称"
        />
      </el-form-item>
      <el-form-item label="商户手机号" prop="phone" class="inline">
        <el-input v-model.trim="dataForm.phone" :disabled="isDisabled || merId > 0" placeholder="请输入商户手机号" />
      </el-form-item>
      <el-form-item label="商户姓名" prop="realName" class="inline">
        <el-input v-model.trim="dataForm.realName" :disabled="isDisabled" placeholder="请输入商户姓名" />
      </el-form-item>
      <el-form-item label="商户分类" prop="categoryId" class="inline">
        <el-select
          v-model="dataForm.categoryId"
          placeholder="请选择商户分类"
          :disabled="isDisabled"
          @change="onChange(dataForm.categoryId)"
        >
          <el-option v-for="item in merchantClassify" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手续费(%)" prop="handlingFee" class="inline">
        <el-input-number
          :disabled="isDisabled"
          v-model.trim="dataForm.handlingFee"
          :min="0"
          :precision="2"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="店铺类型" prop="typeId" class="inline">
        <el-select v-model="dataForm.typeId" placeholder="请选择店铺类型" :disabled="isDisabled">
          <el-option v-for="(item, index) in merchantType" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="排序" prop="sort" class="inline">
        <el-input-number
          v-model.trim="dataForm.sort"
          :disabled="isDisabled"
          :min="$constants.NUM_Range.min"
          :max="$constants.NUM_Range.max"
        ></el-input-number>
      </el-form-item>
      <!-- 商户售卖分账设置 -->



      <el-form-item label="售卖平台服务费" class="lang" :rules="{ required: true }"  >
        <div style="display: flex;flex-direction: row;">
          <el-input v-model="dataForm.feeConfig.sellFee" style="width: 228px;" :disabled="isDisabled">
            <template slot="append">
              <el-select style="width: 60px;" v-model="dataForm.feeConfig.sellFeeType" :disabled="isDisabled">
                <el-option label="%" :value="0"></el-option>
                <el-option label="元" :value="1"></el-option>
              </el-select>
            </template>
          </el-input>
        </div>
        <div>注：每笔订单实际支付金额收取的服务费用。填0表示不收取服务费</div>
      </el-form-item>






      <el-form-item label="售卖分账优先级" class="inline" :rules="{ required: true }">
        <el-radio-group v-model="dataForm.feeConfig.sellFeePriority" :disabled="isDisabled">
          <el-radio label="平台" :value="0"></el-radio>
          <el-radio label="商户" :value="1"></el-radio>
        </el-radio-group>
        <div>注：运费金额默认分给商户，且不参与分账。</div>
      </el-form-item>




      <!-- 点击弹出 -->
      <el-form-item label="关联公司" class="inline" :rules="{ required: true }" >
        <el-input v-model.trim="dataForm.orgName" :disabled="isDisabled" placeholder="关联公司" @click.native="test" />
          <!-- 点击弹出 -->


          <div>



            <el-dialog title="" :visible.sync="dialogVisible" width="600" :before-close="dialogBeforeClose" append-to-body
            customClass="customWidth"
            >
              <div>

                <div>

                  商户名称：
                  <el-input v-model.trim="keyword"
                    placeholder="请输入商户名称" class="selWidth">
                    <el-button slot="append" icon="el-icon-search" class="el-button-solt"
                      @click="getExpressList(1)" />
                  </el-input>
                </div>
                <el-table height="360" :data="tableData.list" border @row-click="singleElection">
                  <el-table-column label="" width="65">
                    <template slot-scope="scope">
                      <el-radio class="radio" v-model="templateSelection" :label="scope.$index">&nbsp;</el-radio>
                    </template>
                  </el-table-column>

                  <el-table-column prop="orgName" label="绑定v5名称">
                  </el-table-column>
                  <el-table-column prop="orgAccount" label="绑定v5企业">
                  </el-table-column>
                </el-table>
                <div class="block-pagination">
                  <el-pagination :page-sizes="[20, 40, 60, 80]" :page-size="tableData.limit"
                    :current-page="tableData.page" layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.total" @current-change="pageChange" @size-change="handleSizeChange" />
                </div>
              </div>
              <div slot="footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
              </div>
            </el-dialog>
          </div>



      </el-form-item>


      <!-- 商户租赁分账设置 -->
      <el-form-item label="租赁平台服务费" class="lang" :rules="{ required: true }" v-if="false">
        <div style="display: flex;flex-direction: row;">
          <el-input v-model="dataForm.leaseFee" style="width: 228px;">
            <template slot="append">
              <el-select style="width: 60px;" v-model="dataForm.leaseFeeType">
                <el-option label="%" :value="0"></el-option>
                <el-option label="元" :value="1"></el-option>
              </el-select>
            </template>
          </el-input>
        </div>
        <div>注：每笔订单实际支付金额收取的服务费用。填0表示不收取服务费</div>
      </el-form-item>
      <el-form-item label="租赁分账优先级" class="lang" v-if="false">
        <el-radio-group v-model="dataForm.leaseFeePriority">
          <el-radio label="平台" :value="0"></el-radio>
          <el-radio label="商户" :value="1"></el-radio>
        </el-radio-group>
        <div>注：运费金额默认分给商户，且不参与分账。</div>
      </el-form-item>
      <!-- 分期分账设置 -->
      <el-form-item label="分期平台服务费" class="lang" :rules="{ required: true }" v-if="false">
        <div style="display: flex;flex-direction: row;">
          <span style="margin-right: 10px;">3期</span>
          <el-input v-model="dataForm.period3Fee" style="width: 228px;">
            <template slot="append">
              <el-select style="width: 60px;" v-model="dataForm.instalmentFeeType">
                <el-option label="%" :value="0"></el-option>
                <el-option label="元" :value="1"></el-option>
              </el-select>
            </template>
          </el-input>
        </div>
        <div style="display: flex;flex-direction: row;margin-top: 10px;">
          <span style="margin-right: 10px;">6期</span>
          <el-input v-model="dataForm.period6Fee" style="width: 228px;">
            <template slot="append">
              <el-select style="width: 60px;" v-model="dataForm.instalmentFeeType">
                <el-option label="%" :value="0"></el-option>
                <el-option label="元" :value="1"></el-option>
              </el-select>
            </template>
          </el-input>
        </div>
        <div style="display: flex;flex-direction: row;margin-top: 10px;">
          <span style="margin-right: 10px;">9期</span>
          <el-input v-model="dataForm.period9Fee" style="width: 228px;">
            <template slot="append">
              <el-select style="width: 60px;" v-model="dataForm.instalmentFeeType">
                <el-option label="%" :value="0"></el-option>
                <el-option label="元" :value="1"></el-option>
              </el-select>
            </template>
          </el-input>
        </div>
        <div style="display: flex;flex-direction: row;margin-top: 10px;">
          <span style="margin-right: 10px;">12期</span>
          <el-input v-model="dataForm.period12Fee" style="width: 228px;">
            <template slot="append">
              <el-select style="width: 60px;" v-model="dataForm.instalmentFeeType">
                <el-option label="%" :value="0"></el-option>
                <el-option label="元" :value="1"></el-option>
              </el-select>
            </template>
          </el-input>
        </div>
      </el-form-item>
      <el-form-item label="分期分账优先级" class="lang" v-if="false">
        <el-radio-group v-model="dataForm.instalmentFeePriority">
          <el-radio label="平台" :value="0"></el-radio>
          <el-radio label="商户" :value="1"></el-radio>
        </el-radio-group>
        <div>注：运费金额默认分给商户，且不参与分账。</div>
      </el-form-item>
      <el-form-item label="商户关键字" prop="labelarr" class="lang">
        <Keyword @getLabelarr="getLabelarr" :isDisabled="isDisabled" :labelarr="labelarr"></Keyword>
      </el-form-item>
      <el-form-item label="资质图片：" prop="sliderImages" class="lang">
        <div class="acea-row">
          <div
            v-for="(item, index) in dataForm.sliderImages"
            :key="index"
            class="pictrue"
            draggable="true"
            @dragstart="handleDragStart($event, item)"
            @dragover.prevent="handleDragOver($event, item)"
            @dragenter="handleDragEnter($event, item)"
            @dragend="handleDragEnd($event, item)"
          >
            <img :src="item" />
            <i v-if="!isDisabled" class="el-icon-error btndel" @click="handleRemove(index)" />
          </div>
          <div v-if="dataForm.sliderImages.length < 10 && !isDisabled" class="upLoadPicBox" @click="modalPicTap('2')">
            <div class="upLoad">
              <i class="el-icon-camera cameraIconfont" />
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="商户地址：" class="lang" v-if="dataForm.addressDetail">
        <span>{{ dataForm.addressDetail }}</span>
      </el-form-item>
      <el-form-item label="备注" prop="remark" class="lang">
        <el-input v-model.trim="dataForm.remark" :disabled="isDisabled" type="textarea" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item label="星级评分" v-if="merId > 0" class="inline">
        <el-rate :disabled="merId > 0 && isDisabled" v-model="dataForm.starLevel" style="margin-top: 8px"></el-rate>
      </el-form-item>
      <el-form-item label="对应终端" class="lang">
        <el-checkbox-group v-model="terminalList">
          <el-checkbox label="商城市场" :disabled="isDisabled"></el-checkbox>
          <el-checkbox label="E站风评" :disabled="isDisabled"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="是否开启" v-if="dataForm.isSwitch" class="inline">
        <el-switch
          v-model="dataForm.isSwitch"
          :disabled="isDisabled"
          :active-value="true"
          :inactive-value="false"
          active-text="显示"
          inactive-text="隐藏"
        ></el-switch>
      </el-form-item>
      <el-form-item label="是否推荐" class="inline">
        <el-switch
          v-model="dataForm.isRecommend"
          :disabled="isDisabled"
          :active-value="true"
          :inactive-value="false"
          active-text="推荐"
          inactive-text="不推荐"
        ></el-switch>
      </el-form-item>
      <el-form-item label="是否自营" class="inline">
        <el-switch
          v-model="dataForm.isSelf"
          :disabled="isDisabled"
          :active-value="true"
          :inactive-value="false"
          active-text="自营"
          inactive-text="非自营"
        ></el-switch>
      </el-form-item>
      <el-form-item label="商品审核" class="inline">
        <el-switch
          v-model="dataForm.productSwitch"
          :disabled="isDisabled"
          :active-value="true"
          :inactive-value="false"
          active-text="开启"
          inactive-text="关闭"
        ></el-switch>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer" v-if="!isDisabled">
      <el-button @click="handleClose('dataForm')">取 消</el-button>
      <el-button
        type="primary"
        v-hasPermi="['platform:merchant:add', 'platform:merchant:update']"
        :loading="loading"
        @click="onsubmit('dataForm')"
        >保存</el-button
      >
    </span>









  </div>

</template>

<script>
// +---------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +---------------------------------------------------------------------
// | Copyright (c) 2016~2023 https://www.crmeb.com All rights reserved.
// +---------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +---------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +---------------------------------------------------------------------
import * as merchant from '@/api/merchant';
import { mapGetters } from 'vuex';
import Keyword from '../../../components/base/keyword';

import { getlist } from '@/api/merchant';



export default {
  name: 'creatClassify',
  components: { Keyword },
  computed: {
    ...mapGetters(['merchantClassify', 'merchantType']),
  },
  props: {
    merId: {
      type: Number,
      default: 0,
    },
    isDisabled: {
      type: Boolean,
      default: false,
    },
    // dialogVisible: {
    //   type: Boolean,
    //   default: false,
    // },
    indexKey: {
      type: Number,
      default: 0,
    },

    pcMall: {
      type: Boolean,
      default: false
    },

    wxMiniRisk: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请填写手机号'));
      } else {
        callback();
      }
    };
    const validateVal = (rule, value, callback) => {
      if (this.labelarr.length === 0) {
        callback(new Error('请输入后回车'));
      } else {
        callback();
      }
    };
    return {
      keyword:"",
      tableData: {},
      dialogVisible: false,
      loading: false,
      loadingFrom: false,
      rules: {
        name: [{ required: true, message: '请输入商户名称', trigger: 'blur' }],
        categoryId: [{ required: true, message: '请选择商户分类', trigger: 'change' }],
        typeId: [{ required: true, message: '请选择店铺类型', trigger: 'change' }],
        realName: [{ required: true, message: '请输入商户姓名', trigger: 'blur' }],
        labelarr: [{ required: true, validator: validateVal, trigger: 'blur' }],
        phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
        handlingFee: [{ required: true, message: '请输入手续费', trigger: 'blur' }],
        sliderImages: [{ required: true, message: '请上传资质图片', type: 'array', trigger: 'change' }]
      },
      dataForm: {
        orgAccount:"",
        orgName:"",
        categoryId: null,
        handlingFee: 0,
        isRecommend: false,
        isSelf: false,
        isSwitch: false,
        keywords: '',
        name: '',
        phone: '',
        productSwitch: false,
        qualificationPicture: '',
        realName: '',
        remark: '',
        sort: 0,
        typeId: null,
        sliderImages: [],
        id: 0,
        feeConfig: {
          sellFee: '',
          sellFeePriority: null,
          sellFeeType: 0,
          leaseFee: '',
          leaseFeePriority: null,
          leaseFeeType: 0,
          period3Fee: '',
          period6Fee: '',
          period9Fee: '',
          period12Fee: '',
          instalmentFeePriority: null,
          instalmentFeeType: 0
        }
      },
      isCn: true,
      labelarr: [],
      terminalList: [],
      templateSelection :'',
      templateRadio:'',
    };
  },
  watch: {
    merId: {
      handler: function (val) {
        if (val > 0) this.onInfo();
      },
      deep: true,
    },
    'dataForm.name': function (val) {
      let pattern = new RegExp('[\u4E00-\u9FA5]+');
      let pattern2 = new RegExp('[A-Za-z]+');
      if (pattern.test(val)) {
        this.isCn = true;
      } else if (pattern2.test(val)) {
        this.isCn = false;
      }
    },
  },
  mounted() {
    if (!this.merchantClassify.length) this.$store.dispatch('merchant/getMerchantClassify');
    if (!this.merchantType.length) this.$store.dispatch('merchant/getMerchantType');
    if (this.merId > 0) this.onInfo();
    this.pcMall ? this.terminalList.push('商城市场') : null;
    this.wxMiniRisk ? this.terminalList.push('E站风评') : null;
  },
  methods: {



    // 分页
    pageChange(e) {


      this.getExpressList(e);
    },
    handleSizeChange(e) {
      this.limit = e;
      this.getExpressList(1);
    },
    singleElection (row) {
        this.templateSelection = row.orgAccount;
        this.templateRadio = row.orgName;
        this.dataForm.orgAccount = row.orgAccount;
        this.dataForm.orgName = row.orgName;
    },
    dialogBeforeClose(){
      this.dialogVisible = false;
    },


    getExpressList(page){
      this.tableData.page = page;
      getlist({name:this.keyword,page:this.tableData.page,limit:this.tableData.limit}).then((res)=>{
        this.tableData = res;
      })
    },
    test(){
      this.dialogVisible = true;
      getlist({name:""}).then((res)=>{
        this.tableData = res;
      })
    },



    getLabelarr(attr) {
      this.labelarr = attr;
    },
    onChange(id) {
      this.dataForm.handlingFee = this.merchantClassify.find((item) => item.id === id).handlingFee;
    },
    // 详情
    onInfo() {
      if (!this.merchantClassify.length) this.$store.dispatch('merchant/getMerchantClassify');
      if (!this.merchantType.length) this.$store.dispatch('merchant/getMerchantType');
      this.loadingFrom = true;
      merchant.merchantDetailApi(this.merId).then((res) => {
        this.$set(res, 'sliderImages', res.qualificationPicture ? JSON.parse(res.qualificationPicture) : []);
        if (res.feeConfig) {
          res.feeConfig.sellFeePriority === 0 ? res.feeConfig.sellFeePriority = '平台' : res.feeConfig.sellFeePriority = '商户';
          res.feeConfig.sellFeeType === 0 ? res.feeConfig.sellFee = parseFloat(res.feeConfig.sellFee) * 100 : null;
        } else {
          res.feeConfig = {};
          res.feeConfig.sellFeePriority = null;
          res.feeConfig.sellFee = '';
          res.feeConfig.sellFeeType = 0;
        }
        this.dataForm = res;
        this.labelarr = res.keywords.split(',') || [];
        this.loadingFrom = false;
      });
    },
    // 点击商品图
    modalPicTap(tit) {
      const _this = this;
      this.$modalUpload(
        function (img) {
          if (img.length > 10) return this.$message.warning('最多选择10张图片！');
          if (img.length + _this.dataForm.sliderImages.length > 10) return this.$message.warning('最多选择10张图片！');
          img.map((item) => {
            _this.dataForm.sliderImages.push(item.sattDir);
          });
        },
        tit,
        'store',
      );
    },
    handleClose() {
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields();
      });
    },
    handleRemove(i) {
      this.dataForm.sliderImages.splice(i, 1);
    },
    onClose() {
      this.$refs['dataForm'].resetFields();
      this.loading = false;
      this.$emit('getList');
    },
    onsubmit(formName) {
      if (!this.dataForm.feeConfig.sellFee) {
        this.$message({
          message: '请填写售卖平台服务费',
          type: 'warning',
          showClose: true
        });
        return;
      }

      if (this.dataForm.feeConfig.sellFeePriority === null) {
        this.$message({
          message: '请选择售卖分账优先级',
          type: 'warning',
          showClose: true
        });
        return;
      }

      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          if (this.dataForm.addressDetail) this.$delete(this.dataForm, 'addressDetail');
          this.dataForm.qualificationPicture = JSON.stringify(this.dataForm.sliderImages);
          this.dataForm.keywords = this.labelarr.join(',');
          this.terminalList.indexOf('商城市场') > -1 ? this.dataForm.pcMall = 1 : this.dataForm.pcMall = 0;
          this.terminalList.indexOf('E站风评') > -1 ? this.dataForm.wxMiniRisk = 1 : this.dataForm.wxMiniRisk = 0;
          this.dataForm.feeConfig.sellFeePriority === '平台' ? this.dataForm.feeConfig.sellFeePriority = 0 : this.dataForm.feeConfig.sellFeePriority = 1;
          if (this.dataForm.feeConfig.sellFeeType === 0) {
            console.info('sdj', this.dataForm.feeConfig.sellFeeType, typeof this.dataForm.feeConfig.sellFeeType);
            this.dataForm.feeConfig.sellFee = parseFloat(this.dataForm.feeConfig.sellFee) / 100;
          }

          this.dataForm.id === 0
            ? merchant
                .merchantAddApi(this.dataForm)
                .then((res) => {
                  this.$message.success(`添加商户成功`);
                  this.onClose();
                })
                .catch(() => {
                  this.loading = false;
                })
            : merchant
                .merchantUpdateApi(this.dataForm)
                .then((res) => {
                  this.$message.success('操作成功');
                  this.onClose();
                })
                .catch(() => {
                  this.loading = false;
                });
        } else {
          return false;
        }
      });
    },
    // 移动
    handleDragStart(e, item) {
      this.dragging = item;
    },
    handleDragEnd(e, item) {
      this.dragging = null;
    },
    handleDragOver(e) {
      e.dataTransfer.dropEffect = 'move';
    },
    handleDragEnter(e, item) {
      e.dataTransfer.effectAllowed = 'move';
      if (item === this.dragging) {
        return;
      }
      const newItems = [...this.dataForm.sliderImages];
      const src = newItems.indexOf(this.dragging);
      const dst = newItems.indexOf(item);
      newItems.splice(dst, 0, ...newItems.splice(src, 1));
      this.dataForm.sliderImages = newItems;
    },
  },
};
</script>

<style scoped lang="scss">
.el-alert {
  line-height: 20px;
  margin-left: 41px;
  margin-bottom: 9px;
  width: 90%;
  ::v-deep.el-form-item__content {
    width: 94%;
  }
}
.lang {
  width: 93.5%;
  ::v-deep.el-form-item__content {
    width: 79%;
  }
}
.inline {
  // width: 228px;
  ::v-deep.el-form-item__content,
  ::v-deep.el-input-number {
    width: 228px;
  }
  ::v-deep.el-select {
    width: 100%;
  }
}

.customWidth {
  width:600px;
}
</style>
