<template>
  <div>
    <!--表单-->
    <el-form ref="supplierDataField" size="small" :rules="ruleValidate" :model="supplierData" label-width="130px" @submit.native.prevent>
      <el-tabs v-loading="loading" type="border-card" v-model="activeName">
        <div class="section">
          <div class="title">邀请人</div>
          <el-row :gutter="24" class="mt20">
            <el-col :span="12">
              <el-form-item label="选择邀请人：">
                <el-button size="small" type="primary" @click="showSelectAgent(1)">{{ supplierData.inviteUser ? '变更邀请人' : '选择邀请人' }}</el-button>
              </el-form-item>
              <el-form-item label="">
                <div class="user-content" v-if="supplierData.inviteUser">
                  <div class="user-avatar">
                    <img :src="supplierData.inviteUser.avatar || moren" />
                  </div>
                  <div class="user-info">
                    <div class="nickname">{{ supplierData.inviteUser.nickname }}</div>
                    <div class="agent-type-text">
                      <el-tag type="info" effect="dark" size="small">{{ supplierData.inviteUser.uid }}</el-tag>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="title">基础信息</div>
          <el-row :gutter="24" class="mt20">
            <el-col :span="12">
              <el-form-item label="供应商名称：" prop="supplier_name">
                <el-input v-model="supplierData.supplier_name" placeholder="请填写供应商名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供应商地址：" prop="detailed_address">
                <el-input v-model="supplierData.detailed_address" placeholder="请填写详细地址" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人姓名：" prop="name">
                <el-input type="text" placeholder="请填写联系人姓名" v-model="supplierData.name" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话：" prop="phone">
                <el-input placeholder="请填写联系电话" v-model="supplierData.phone" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供应商邮箱：" prop="email">
                <el-input v-model="supplierData.email" placeholder="请填写邮箱地址" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="排序：" prop="sort">
                <el-input-number v-model="supplierData.sort" controls-position="right" placeholder="请输入排序"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态：" prop="is_show">
                <el-switch v-model="supplierData.is_show" :active-value="1" :inactive-value="0" :width="55" active-text="开启" inactive-text="关闭" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商品审核：" prop="is_examine">
                <el-switch v-model="supplierData.is_examine" :active-value="1" :inactive-value="0" :width="50" active-text="是" inactive-text="否" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注：" prop="mark">
                <el-input type="textarea" v-model="supplierData.mark" placeholder="请填写备注" :maxlength="250" autosize :rows="5" resize="none" />
              </el-form-item>
            </el-col>
          </el-row>
          <div class="title">账号密码</div>
          <el-row :gutter="24" class="mt20">
            <el-col :span="12">
              <el-form-item label="商户账号：" :prop="isAdd ? 'supplier_account' : ''">
                <el-input type="text" v-model="supplierData.supplier_account" :disabled="!isAdd"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="登陆密码：" :prop="isAdd ? 'supplier_password' : ''">
                <el-input type="password" v-model="supplierData.supplier_password" :disabled="!isAdd"/>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-tabs>
    </el-form>
    <!-- 邀请人选择器 -->
    <el-dialog title="负责人选择" :visible.sync="selectAgentPopupVisible" width="80%" :before-close="closeSelectAgent" :append-to-body="true">
      <el-card class="box-card">
        <!--顶部搜索栏-->
        <div slot="header" class="clearfix">
          <div class="container">
            <el-form inline size="small" label-width="80px">
              <el-form-item label="">
                <el-input v-model="agentTableFrom.uid" placeholder="请输入用户ID" class="selWidth" clearable />
                <el-input v-model="agentTableFrom.contact_name" placeholder="请输入联系人姓名" class="selWidth" clearable />
                <el-input v-model="agentTableFrom.contact_phone" placeholder="请输入联系人电话" class="selWidth" clearable />
                <el-select v-model="agentTableFrom.agent_type" class="selWidth" >
                  <el-option label="发起人" :value="1"></el-option>
                  <el-option label="省公司" :value="2"></el-option>
                  <el-option label="省合伙人(外勤)" :value="3"></el-option>
                  <el-option label="省合伙人(内勤)" :value="4"></el-option>
                  <el-option label="区县运营商" :value="5"></el-option>
                  <!--<el-option label="区县合伙人" :value="6"></el-option>-->
                  <!--<el-option label="餐厅" :value="7"></el-option>-->
                  <!--<el-option label="配送商" :value="8"></el-option>-->
                </el-select>
              </el-form-item>
            </el-form>
            <el-button size="small" type="primary" @click="getAgentList(1)">搜索</el-button>
          </div>
        </div>
        <!--表格信息-->
        <el-table v-loading="selectAgentLoading" :data="agentTableData.data" style="width: 100%" size="mini">
          <el-table-column label="负责人" min-width="300" align="center">
            <template slot-scope="scope">
              <div class="user-content">
                <div class="user-avatar">
                  <img :src="scope.row.user.avatar || moren" />
                </div>
                <div class="user-info">
                  <div class="nickname">{{ scope.row.user.nickname }}</div>
                  <div class="agent-type-text">
                    <el-tag type="info" effect="dark" size="small">{{ scope.row.user.uid }}</el-tag>
                    <el-tag v-if="Number(scope.row.agent_type) == 7 && scope.row.mer" type="success" effect="dark" size="small">{{ scope.row.mer.mer_name }}</el-tag>
                    <el-tag v-if="Number(scope.row.agent_type) == 8 && Object.values(scope.row.merList).length > 0" type="success" effect="dark" size="small">
                        {{ scope.row.merList[0].mer_name }}
                        {{ Object.values(scope.row.merList).length > 1 ? '+'+Object.values(scope.row.merList).length : '' }}
                      </el-tag>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="代理身份" min-width="200" align="center">
            <template slot-scope="scope">
              <el-tag v-if="Number(scope.row.agent_type) == 1" type="info" effect="dark" size="small">发起人</el-tag>
              <el-tag v-if="Number(scope.row.agent_type) == 2" type="info" effect="dark" size="small">省公司</el-tag>
              <el-tag v-if="Number(scope.row.agent_type) == 3" type="info" effect="dark" size="small">省合伙人(外勤)</el-tag>
              <el-tag v-if="Number(scope.row.agent_type) == 4" type="info" effect="dark" size="small">省合伙人(内勤)</el-tag>
              <el-tag v-if="Number(scope.row.agent_type) == 5" type="info" effect="dark" size="small">区县运营商</el-tag>
              <el-tag v-if="Number(scope.row.agent_type) == 6" type="info" effect="dark" size="small">区县合伙人</el-tag>
              <el-tag v-if="Number(scope.row.agent_type) == 7" type="info" effect="dark" size="small">餐厅</el-tag>
              <el-tag v-if="Number(scope.row.agent_type) == 8" type="info" effect="dark" size="small">配送商</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="联系人" min-width="200" align="center">
            <template slot-scope="scope">
              {{ scope.row.contact_name }}<br />
              {{ scope.row.contact_phone }}
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="150" align="center">
            <template slot-scope="scope">
              <el-button type="success" effect="dark" @click="selectedAgent(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="block">
          <el-pagination
            :page-sizes="[20, 40, 60, 80]"
            :page-size="agentTableFrom.limit"
            :current-page="agentTableFrom.page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="agentTableData.total"
            @size-change="handleAgentSizeChange"
            @current-change="pageAgentChange"
          />
        </div>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeSelectAgent">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {  merchantUpdate } from "@/api/merchant";
import {accountCreate} from "@/api/supplier";
import {agentList} from "@/api/marketing";

export default {
  props: {
    supplierData: {
      type: Object,
      default: {},
    },
    isAdd: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      moren: require("@/assets/images/f.png"),
      // 代理信息
      loading: false,
      supplierId: '',
      direction: 'rtl',
      activeName: 'detail',
      ruleValidate: {
        supplier_name: [{ required: true, message: '请输入供应商名称', trigger: 'blur' }],
        supplier_account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        supplier_password: [{ required: true, message: '请输入登录密码', trigger: 'blur' }],
        name: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
        phone: [
          {
            required: true, validator: function (rule, value, callback) {
              if (!value) {
                return callback(new Error('请填写联系方式'))
              } else if (!/^1[3456789]\d{9}$/.test(value)) {
                callback(new Error('格式不正确!'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ],
      },
      // 用户选择弹框
      selectAgentPopupVisible: false,
      selectAgentLoading: true,
      userListLoading: false,
      agentTableFrom: {
        page: 1,
        limit: 20,
        is_invite_supplier: 1,
        uid: '',
        contact_name: '',
        contact_phone: '',
        agent_type: '',
      },
      agentTableData: {
        data: [],
        total: 0,
      },
    };
  },
  filters: {},
  mounted() {},
  methods: {
    // 重置表单数据
    resetData(){
      this.$refs.supplierDataField.resetFields();
    },
    // 提交信息
    submitInfo(){
      let _this = this;
      _this.$refs['supplierDataField'].validate((valid) => {
        if (valid) {
          accountCreate(_this.supplierData).then(async (res) => {
            _this.$message.success(res.message);
            _this.$emit('success');
          }).catch((res) => {
            _this.$message.error(res.message);
          });
        }
      });
    },
    // 代理商选择器 - 弹框显示
    showSelectAgent(){
      this.getAgentList(1);
      this.selectAgentPopupVisible = true;
    },
    // 代理商选择器 - 弹框关闭
    closeSelectAgent() {
      this.selectAgentPopupVisible = false;
    },
    // 代理商选择器 - 获取列表及分页
    getAgentList(num){
      let _this = this;
      _this.selectAgentLoading = true;
      _this.agentTableFrom.page = num ? num : _this.agentTableFrom.page;
      agentList(_this.agentTableFrom)
        .then((res) => {
          _this.agentTableData.data = res.data.list;
          _this.agentTableData.total = res.data.count;
          _this.selectAgentLoading = false;
        })
        .catch((res) => {
          _this.selectAgentLoading = false;
          _this.$message.error(res.message);
        });
    },
    pageAgentChange(page) {
      this.agentTableFrom.page = page;
      this.getAgentList('');
    },
    handleAgentSizeChange(val) {
      this.agentTableFrom.limit = val;
      this.getAgentList('');
    },
    // 代理商选择器 - 选中用户
    selectedAgent(item){
      this.supplierData.inviteUser = item.user || {};
      this.supplierData.invite_uid = item.uid;
      this.supplierData.invite_agent_id = item.id;
      this.closeSelectAgent();
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="scss" scoped>
.selWidth{
  margin-bottom: 10px!important;
}
.user-content{
  --user-content-height-: 80px;

  height: var(--user-content-height-);
  width: 100%;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  .user-avatar{
    height: var(--user-content-height-);
    width: var(--user-content-height-);
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    img{
      height: 80%!important;
      width: 80%!important;
      border-radius: 50% !important;
    }
  }
  .user-info{
    max-width: calc(100% - var(--user-content-height-));
    height: var(--user-content-height-);
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    .nickname{
      width: 100%;
      height: 25px;
      line-height: 25px;
      text-align: left;
      font-size: 15px;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      .user-id{
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        height: 18px;
        line-height: 20px;
        font-size: 13px;
        padding: 0 5px;
        border-radius: 5px;
        margin-left: 10px;
        width: max-content!important;
      }
    }
    .user-id{
      width: 100%;
      text-align: left;
      font-size: 13px;
      line-height: calc(var(--user-content-height- * 35%));
    }
  }
}
</style>
