<template>
    <div>




      <el-card >
        <template #header>
        <div class="container" style="margin:2px">
          <div style="font-weight: bold;font-style: italic;margin: 10px;margin-left: 50px">我的信息</div>
          <div style="color: lightgray;font-size:13px;margin-left: 40px">修改个人信息主页</div>
        </div>
        </template>
          <div class="container" style="display: flex;justify-content:center">
             <el-form  :model="form" label-width="120px" :rules="rules"  ref="ruleFormRef">
              <el-form-item label="承运商名称:" style="margin-bottom: 20px;" prop="ftransname">
                <el-input  style="width:300px" v-model="form.ftransname" placeholder="承运商全称"
                          clearable></el-input><span style="color: red;font-size:11px">*必填</span>
              </el-form-item>
              <el-form-item label="用户名:" style="margin-bottom: 20px;" prop="administrator">
                <el-input style="width:300px" v-model="form.administrator" placeholder="不少于6位数的字母或数字"
                          clearable></el-input><span style="color: red;font-size:11px">*必填</span>
              </el-form-item>
               <el-form-item  label="登录密码:" style="margin-bottom: 20px;" prop="logonpassword">
                 <el-input type="password" style="width:300px" v-model="form.logonpassword" placeholder="不少于8位数的字母或数字"
                            clearable></el-input><span style="color: red;font-size:11px">*必填</span>
               </el-form-item>
              <el-form-item label="确认密码:" style="margin-bottom: 20px;" prop="confirmPassword">
                <el-input type="password"  style="width:300px" v-model="form.confirmPassword" placeholder="不少于8位数的字母或数字"
                          clearable></el-input><span style="color: red;font-size:11px">*必填</span>
              </el-form-item>

            </el-form>
          </div>
        </el-card>

      <el-card >
        <template #header>
        <div class="container" style="margin:2px">
          <div style="font-style: italic;margin-left: 50px">综合信息</div>
        </div>
        </template>
        <div class="container" style="display: flex;justify-content:center">
          <el-form  :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
            <el-form-item label="承运商负责人:" style="margin-bottom: 20px;" prop="ftransdirector">
              <el-input  style="width:300px" v-model="form.ftransdirector" placeholder="负责人姓名"
                         clearable></el-input>
            </el-form-item>

            <el-form-item label="负责人电话:" style="margin-bottom: 20px;" prop="ftransdirectorphone">
              <el-input style="width:300px" v-model="form.ftransdirectorphone" placeholder="负责人电话"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="详细描述:"  style="margin-bottom: 20px;" prop="ftransdescribe">
              <el-input  type="textarea" :rows="2" style="width:300px" v-model="form.ftransdescribe" placeholder="具体公司情况"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="能力描述:" style="margin-bottom: 20px;" prop="ftransdescribe">
              <el-input type="textarea" :rows="2" style="width:300px" v-model="form.capaDescription" placeholder="能力描述(车辆情况，驾驶员情况)"
                         clearable></el-input>
            </el-form-item>

          </el-form>
        </div>
      </el-card>

      <el-card >
        <template #header>
        <div class="container" style="margin:2px">
          <div style="font-style: italic;margin-left: 50px">资金注册信息<span style="color: red;font-size:11px">*必填</span></div>
        </div>
        </template>
        <div class="container" style="display: flex; justify-content: center;">
          <el-form  :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
            <div style="display: flex;">
              <el-form-item label="资金注册:" style="margin-bottom: 20px;" prop="fundRegist">
                <el-input  style="width:100px" v-model="form.fundRegist" placeholder="单位:万元"
                           clearable></el-input><span style="color: red;font-size:11px">*必填</span>
              </el-form-item>

              <el-form-item label="资金币种:" style="margin-bottom: 20px;">
                <Selector :value="form.fundCurrency" :width="100"  dicType="FUND_CURRENCY" @change="typeChange4">
                </Selector>
              </el-form-item>
            </div>

            <el-form-item label="通讯地址:" style="margin-bottom: 20px;">
              <el-input style="width: 350px;" v-model="form.mailAddress" placeholder="负责人电话" clearable></el-input>
            </el-form-item>

            <el-form-item label="邮政编码:" style="margin-bottom: 20px;">
              <el-input style="width: 350px;" v-model="form.postalCode" placeholder="" clearable></el-input>
            </el-form-item>

            <el-form-item label="税号:" style="margin-bottom: 20px;">
              <el-input style="width: 350px;" v-model="form.tax" placeholder="" clearable></el-input>
            </el-form-item>
            <el-form-item label="开户银行:" style="margin-bottom: 20px;">
              <el-input style="width: 350px;" v-model="form.bank" placeholder="" clearable></el-input>
            </el-form-item>
            <el-form-item label="银行账号:" style="margin-bottom: 20px;">
              <el-input style="width: 350px;" v-model="form.bankAccount" placeholder="" clearable></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>

      <el-card >
        <template #header>
        <div class="container" style="margin:2px">
          <div style="font-style: italic;margin-left: 50px">联系方式</div>
        </div>
        </template>
        <div class="container" style="display: flex;justify-content:center">
          <el-form  :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
            <el-form-item label="法人代表:" style="margin-bottom: 20px;" prop="corporation">
              <el-input  style="width:300px" v-model="form.corporation" placeholder=""
                         clearable></el-input><span style="color: red;font-size:11px">*必填</span>
            </el-form-item>
            <el-form-item label="手机号:" style="margin-bottom: 20px;" prop="corporationPhone">
              <el-input style="width:300px" v-model="form.corporationPhone" placeholder=""
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="电话号码:" style="margin-bottom: 20px;" prop="corporationNumber">
              <el-input style="width:300px" v-model="form.corporationNumber" placeholder=""
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="传真号码:" style="margin-bottom: 20px;" prop="corporationFax">
              <el-input  style="width:300px" v-model="form.corporationFax" placeholder=""
                         clearable></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱:" style="margin-bottom: 20px;" prop="corporationMailbax">
              <el-input style="width:300px" v-model="form.corporationMailbax" placeholder=""
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="企业网址:" style="margin-bottom: 20px;" prop="businessWebsite">
              <el-input style="width:300px" v-model="form.businessWebsite" placeholder=""
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="授权人:" style="margin-bottom: 20px;" prop="authorizer">
              <el-input  style="width:300px" v-model="form.authorizer" placeholder=""
                         clearable></el-input><span style="color: red;font-size:11px">*必填</span>
            </el-form-item>
            <el-form-item label="手机号:" style="margin-bottom: 20px;" prop="authorizerPhone">
              <el-input  style="width:300px" v-model="form.authorizerPhone" placeholder="授权人手机号"
                         clearable></el-input><span style="color: red;font-size:11px">*必填</span>
            </el-form-item>
            <el-form-item label="电话号码:" style="margin-bottom: 20px;" prop="authorizerNumber">
              <el-input  style="width:300px" v-model="form.authorizerNumber" placeholder="授权人电话号码"
                         clearable></el-input>
            </el-form-item>
            <el-form-item label="传真号码:" style="margin-bottom: 20px;" prop="authorizerFax">
              <el-input  style="width:300px" v-model="form.authorizerFax" placeholder="授权人传真号码"
                         clearable></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱:" style="margin-bottom: 20px;" prop="authorizerMailbax">
              <el-input  style="width:300px" v-model="form.authorizerMailbax" placeholder="授权人电子邮箱"
                         clearable></el-input>
            </el-form-item>
          </el-form>

        </div>
        <div style="display: flex; justify-content: center;margin-top:30px;">
          <el-button plain type="primary" @click="handleSave(ruleFormRef)">修改</el-button>

        </div>
      </el-card>




    </div>
</template>

<script setup>
    import ButtonBar from '@/components/ButtonBar.vue'

    import {
        ref,
        reactive,
        onMounted,
        getCurrentInstance
    } from 'vue'

    const {
        proxy
    } = getCurrentInstance()

    import tools from '@/tools'
    import Selector from "@/components/Selector.vue";
    const cardBodyStyle = ref(tools.style.card)
    const inputStyle = ref(tools.style.input)

    onMounted(() => {
        handleSearch()
    })



    /**
     *   查询
     */


    const typeChange4 = (val) => {
      form.value.fundCurrency = val
    }

    const query = ref({
           ftranscode: '', 
           ftransname: '', 
           ftransdirector: '', 
           ftransdirectorphone: '', 
           ftransdescribe: '', 
           ftransroute: '', 
           frecommendperson: '', 
           fother: '',
          administrator:'',
          logonpassword:'',
          confirmPassword:'',
          fundRegist:'',
      capaDescription:'',
      fundCurrency:'',
      mailAddress:'',
      postalCode:'',
      tax:'',
      bank:'',
      bankAccount:'',
      corporation:'',
      corporationPhone:'',
      corporationNumber:'',
      corporationFax:'',
      corporationMailbax:'',
      businessWebsite:'',
      authorizer:'',
      authorizerPhone:'',
      authorizerNumber:'',
      authorizerFax:'',
      authorizerMailbax:'',

   })
   const tableData = ref([])
    const tableData1 = ref({
    })
   const handleSearch = () => {
       getTable()
   }


    const ftrans=ref({

      ftranscode: localStorage.getItem('ftranscode')
    })
    const getTable = () => {

      var url = 'tms/Carrier/queryByFtransname'

      if (ftrans.value.ftranscode==null){

        return
      }


      console.log(ftrans.value)
      var param = {
        params: JSON.stringify(ftrans.value)
      }
      proxy.$axios.get(url, param).then(response => {
        if (response.data.code == '0') {
          form.value = response.data.data
          if (form.value.reviewRes) {
            alert(form.value.reviewRes);
            return
          }
          console.log(tableData1.value)
        } else {
          ElMessage.error('操作失败！' + response.data.msg)
        }
      })
    }
    /**
     *   查询
     */

    /**
     * 分页
     */


    const dialogVisible = ref(false)
    const form = ref({
      ftranscode: '',
      ftransname: '',
      ftransdirector: '',
      ftransdirectorphone: '',
      ftransdescribe: '',
      ftransroute: '',
      frecommendperson: '',
      fother: '',
      administrator:'',
      logonpassword:'',
      confirmPassword:'',
      fundRegist:'',
      capaDescription:'',
      fundCurrency:'',
      mailAddress:'',
      postalCode:'',
      tax:'',
      bank:'',
      bankAccount:'',
      corporation:'',
      corporationPhone:'',
      corporationNumber:'',
      corporationFax:'',
      corporationMailbax:'',
      businessWebsite:'',
      authorizer:'',
      authorizerPhone:'',
      authorizerNumber:'',
      authorizerFax:'',
      authorizerMailbax:'',
      reviewRes:''


    })
    const ruleFormRef = ref()
    const rules = reactive({
      ftransname: [{
        required: true,
        message: '请输入承运商名称',
        trigger: 'change'| 'blur'
        }],
      administrator: [{
            required: true,
            message: '请输入用户名',
            trigger: 'change' | 'blur'
        }, {
          min: 6,
          pattern: /^[a-zA-Z0-9]{6,}$/,
          message: '用户名至少包含6位字母或数字',
          trigger:  'blur' // 失去焦点时触发验证
        }],
        logonpassword: [{
            required: true,
            message: '请输入密码',
            trigger: 'change' | 'blur'
        }, {
          min: 8,
          pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/,
          message: '密码至少包含8位大小写字母或数字',
          trigger:  'blur' // 失去焦点时触发验证
        }],
      confirmPassword: [{
        required: true,
        message: '请确认密码',
        trigger: 'change'| 'blur'
      },  /*{
        validator: (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请再次输入登录密码'));
          } else if (value !== query.value.logonpassword) {
            callback(new Error('两次输入的密码不一致'));
          } else {
            callback();
          }
        },
        trigger: 'blur'
      }*/],
      fundRegist: [{
        required: true,
        message: '注册资金不能为空',
        trigger: 'change'| 'blur'
      }],
      corporation: [{
        required: true,
        message: '法人代表不能为空',
        trigger: 'change'| 'blur'
      }],
      authorizer: [{
        required: true,
        message: '授权人不能为空',
        trigger: 'change'| 'blur'
      }],
      authorizerPhone: [{
        required: true,
        message: '授权人手机号不能为空',
        trigger: 'change'| 'blur'
      }],

    })

    const handleAdd = () => {
        form.value = {
          ftranscode: '',
          ftransname: '',
          ftransdirector: '',
          ftransdirectorphone: '',
          ftransdescribe: '',
          ftransroute: '',
          frecommendperson: '',
          fother: '',
          administrator:'',
          logonpassword:'',
          confirmPassword:'',
          fundRegist:'',
          capaDescription:'',
          fundCurrency:'',
          mailAddress:'',
          postalCode:'',
          tax:'',
          bank:'',
          bankAccount:'',
          corporation:'',
          corporationPhone:'',
          corporationNumber:'',
          corporationFax:'',
          corporationMailbax:'',
          businessWebsite:'',
          authorizer:'',
          authorizerPhone:'',
          authorizerNumber:'',
          authorizerFax:'',
          authorizerMailbax:'',
        }
        dialogVisible.value = true
    }
    /**
     * 新增
     */
    /**
     * 保存、修改、删除
     */

    const openDialog=()=>{
    }

    //直接保存：


    const handleSave = (ruleFormRef) => {


      ElMessageBox.confirm(
          '确定修改个人信息?注:修改期间您将无法参与竞价等活动',
          '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            draggable: true,
          }
      ).then(() => {
        ruleFormRef.validate((valid, fields) => {

            if (valid) {
                var url = 'tms/Carrier/submit'
                var param = {
                    json: JSON.stringify(form.value),
                }
                proxy.$axios.post(url, param).then(response => {
                    if (response.data.code == 0) {
                      //删除缓存
                      if (localStorage.getItem('ftranscode') != null) {
                        localStorage.removeItem('ftranscode')
                      }
                      form.value = response.data.data

                        ElMessage({
                            message: '提交成功',
                            type: 'success',
                        })
                    } else {
                        // ElMessage.error('操作失败！' + response.data.msg)
                        ElMessage({
                            message: '操作失败' + response.data.msg,
                            type: 'error'
                        })
                    }
                })

            } else {
                console.log('error submit!', fields)
            }
        })
      })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '已取消',
            })
          })
    }
    const handleCancelSave = () => {
        dialogVisible.value = false
    }
    const handleEdit = (row) => {
        dialogVisible.value = true
        form.value = row
    }


    /**
     * 保存、修改、删除
     */



    const handleUpload = () => {
        console.log('handleUpload')
    }

    const handleDownload = () => {
        console.log('handleDownload')
    }

    const handleImport = () => {
        console.log('handleImport')
    }

    const handleExport = () => {
        console.log('handleExport')
    }

</script>

<style>
</style>