<template>
  <div class="app-container account-add">
    <el-scrollbar height="100%">
      <el-form :model="state.form" :rules="state.rules" label-width="150" ref="accountAddRef">
        <el-card class="mb-4" shadow="never">
          <el-divider content-position="left">基本信息</el-divider>
          <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="用户类型" prop="accountshtype">
                <el-radio-group v-model="state.form.accountshtype">
                  <el-radio label="个人工商户">个人工商户</el-radio>
                  <el-radio label="企业">企业</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" v-if="userStore.accountlx === '管理员'">
              <el-form-item label="关联代理商" prop="accountagentsid">
                <el-select v-model="state.form.accountagentsid" placeholder="选择关联代理商" class="w-full">
                  <el-option :label="item.label" :value="item.value" v-for="(item, index) in state.accountagentsOptions" :key="`agents_${index}`" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" v-if="isCompany">
              <el-form-item label="公司名称" prop="accountgsm">
                <el-input v-model="state.form.accountgsm" placeholder="公司名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" v-if="isCompany">
              <el-form-item label="公司地址" prop="accountgsdz">
                <el-input v-model="state.form.accountgsdz" placeholder="公司地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="纳税人识别号" prop="accountlsrsbh">
                <el-input v-model="state.form.accountlsrsbh" placeholder="纳税人识别号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" v-if="isCompany">
              <el-form-item label="企业类型" prop="accountqylx">
                <el-input v-model="state.form.accountqylx" placeholder="企业类型"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="所属行业" prop="accountsshy">
                <el-input v-model="state.form.accountsshy" placeholder="所属行业"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="联系人" prop="accountlxr">
                <el-input v-model="state.form.accountlxr" placeholder="联系人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="联系人手机号" prop="accountlxrphone">
                <el-input v-model="state.form.accountlxrphone" placeholder="联系人手机号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="联系人身份证" prop="accountzjh">
                <el-input v-model="state.form.accountzjh" placeholder="联系人身份证"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="业务介绍" prop="accountywjs">
                <el-input type="textarea" :rows="5" v-model="state.form.accountywjs" placeholder="业务介绍"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="身份证正反面上传" prop="sfz">
                <UploadFile v-model:fileID="state.form.sfz" multiple accept="image/*" :limit="2" attmodel="sfz" ref="sfzUploadRef" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="营业执照上传" prop="yyzz">
                <UploadFile v-model:fileID="state.form.yyzz" multiple accept="image/*" :limit="2" attmodel="yyzz" ref="yyzzUploadRef" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="mb-4" shadow="never">
          <el-divider content-position="left">账号信息</el-divider>
          <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="登录账号" prop="accountname">
                <el-input v-model="state.form.accountname" placeholder="登录账号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="登录密码" prop="accountpwd">
                <el-input v-model="state.form.accountpwd" placeholder="登录密码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="mb-4" shadow="never">
          <el-divider content-position="left">AI客服信息</el-divider>
          <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="AI客服名称" prop="accountainame">
                <el-input v-model="state.form.accountainame" placeholder="AI客服名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="mb-4" shadow="never">
          <el-divider content-position="left">推荐人信息</el-divider>
          <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="推荐人" prop="accounttjsid">
                <el-select v-model="state.form.accounttjsid" filterable remote placeholder="输入推荐人" class="w-full"></el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <div class="submit-btn-box flex justify-center">
          <el-button type="primary" size="large" class="w-28" @click="handleAddAccount">开通账号</el-button>
        </div>
      </el-form>
    </el-scrollbar>
  </div>
</template>

<script setup>
import UploadFile from '@/components/UploadFile/index.vue'
import useAgentsManageManageStore from '@store/modules/agentsManage'
import useAccountManageStore from '@store/modules/accountManage'
import useUserStore from '@store/modules/user'
import _ from 'lodash'
import md5 from 'js-md5'

const agentsManageStore = useAgentsManageManageStore()
const accountManageStore = useAccountManageStore()
const userStore = useUserStore()
const {proxy} = getCurrentInstance()
const yyzzUploadRef = ref(null)
const sfzUploadRef = ref(null)
const state = reactive({
  accountagentsOptions: [], // 代理商列表
  form: {
    accountshtype: '个人工商户'
  },
  rules: {
    accountname: [
      {required: true, message: '请输入登录账号', trigger: 'blur'},
      {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
    ],
    accountpwd: [
      {required: true, message: '请输入登录密码', trigger: 'blur'},
      {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
    ]
  } // 表单验证
})
const accountAddRef = ref(null)

const getAgentsListData = async () => {
  try {
    const list = await agentsManageStore.list({pageindex: 1, rows: 9999})
    state.accountagentsOptions = list.Data.map((item) => {
      return {
        label: item.agentsname,
        value: item.agentsid
      }
    })
  } catch (error) {}
}

const handleAddAccount = () => {
  accountAddRef.value.validate(async (valid) => {
    if (valid) {
      const params = {
        ..._.cloneDeep(state.form)
      }

      if (params.yyzz) {
        params.fileids = params.yyzz
        delete params.yyzz
      }

      if (params.sfz) {
        params.fileids += ',' + params.sfz
        delete params.sfz
      }

      if (params.accountpwd) params.accountpwd = md5(params.accountpwd)

      try {
        await accountManageStore.accountAdd(params)
        proxy.$modal.alertSuccess('开通成功！')
        accountAddRef.value.resetFields()
        yyzzUploadRef.value.clearFiles()
        sfzUploadRef.value.clearFiles()
      } catch (error) {
        proxy.$modal.alertError('开通失败！' + String(error))
      }
    }
  })
}

const isCompany = computed(() => {
  return state.form.accountshtype === '企业'
})

onMounted(() => {
  getAgentsListData()
})
</script>

<style lang="scss" scoped></style>
