<template>
    <div style="padding-top: 20px;">
      <el-row :gutter="50">
      <el-col :span="12">
        <div class="app-container" style="margin-bottom: 12px;padding-bottom: 5px;border-radius: 10px;">
          <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 25px;padding-bottom: 10px;border-bottom:2px dashed #ccc;">
            <div style="display: flex;align-items: center;">
              <div style="width: 40px;padding-top: 10px;">
                <img src="@/assets/images/qiyelogo.png" style="width: 100%;" />
              </div>
              <div style="padding-left:10px;font-size: 26px;color: #043261;">河北智能机械设备有限公司</div>
            </div>
            <el-button 
              type="primary" 
              icon="Edit" 
              plain 
              @click="showpop(2)"
            >修改</el-button>
          </div>
          <div class="neirong">统一社会信用代码：<span>12345678978945</span></div>
          <div class="neirong">联系人：<span>张三三</span></div>
          <div class="neirong">联系电话：<span>0311-12378952</span></div>
          <div class="neirong">详细地址：<span>河北省石家庄市桥西区塔坛大街123号</span></div>
          <div class="neirong">银行账户：<span>45678998787423221</span></div>
          <div class="neirong">开户行名称：<span>建设银行塔坛支行</span></div>
          <div class="neirong">微信支付商户号：<span>1213223312313</span></div>
        </div>
      </el-col>
      <el-col :span="12"></el-col>
    </el-row>
      <!-- 添加或修改用户配置对话框 -->
        <el-dialog 
          v-model="openpop" 
          :title="ystit" 
          width="800px" 
          append-to-body
          :close-on-click-modal="false"
        >
        <el-form ref="yysRef" :model="addata" :rules="rules" label-width="110px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="区划" prop="division">
                <el-cascader
                  ref="cascader"
                  v-model="slecas"
                  style="width: 100%;" 
                  :options="options" 
                  clearable
                  :props="{
                    label:'admdvsName',
                    value:'admdvsNo',
                    children:'subAdmdvsInfoList'
                  }" 
                  @change="change"
                />
                <!-- <el-input v-model="addata.division" placeholder="请选择区划" maxlength="20" /> -->
              </el-form-item>
            </el-col>
            <el-col :span="12">

              <el-form-item label="公司名称" prop="name">
                <el-input v-model="addata.name" placeholder="请输入公司名称" maxlength="50" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="组织机构代码" prop="code">
                <el-input 
                  v-model="addata.code" 
                  placeholder="请输入组织机构代码" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="详细地址" prop="address">
                <el-input 
                  v-model="addata.address" 
                  placeholder="请输入详细地址" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人" prop="contacts">
                <el-input 
                  v-model="addata.contacts" 
                  placeholder="请输入联系人" 
                  maxlength="20" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="phone">
                <el-input 
                  v-model="addata.contacts" 
                  placeholder="请输入联系电话" 
                  maxlength="11" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开户行" prop="bankName">
                <el-input 
                  v-model="addata.bankName" 
                  placeholder="请输入开户行" 
                  maxlength="20" 
                />
              </el-form-item>
              </el-col>
              <el-col :span="12">
              <el-form-item label="银行账号" prop="bankAccount">
                <el-input 
                  v-model="addata.bankAccount" 
                  placeholder="请输入银行账号" 
                  maxlength="30" 
                />
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="微信支付商户号" prop="wechatPayMchid">
                <el-input 
                  v-model="addata.wechatPayMchid" 
                  placeholder="请输入微信支付商户号" 
                  maxlength="30" 
                />
              </el-form-item>
              </el-col>
              <el-col>
              <!-- <el-form-item label="logo" prop="logo">
                <el-upload
                  class="avatar-uploader"
                  action="http://localhost:5173/dev-api/resource/file/upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
              </el-form-item> -->
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="handleAdd">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  <script setup lang="ts" name="UserPage">
      import { 
        getlist,
        updateyys,
      } from '@/api/systemSet/guanlf'
      import {
        getArea
      } from '@/api/common'
      import { ref,reactive } from 'vue'
      import { ElMessage, ElMessageBox } from 'element-plus'
      import type { UploadProps } from 'element-plus'


      
      //新增、修改
      let openpop = ref(false)
      let ystit = ref('修改')
      let yysRef = ref()
      let slecas = ref('')
      let addata = reactive({
        pkId:'',
        division:'',		        //区划名称
        divisionNo:'',	        //区划编码
        name:'',	              //管理方名称
        code:'',	              //组织机构代码
        logo:'',	              //logo地址
        address:'',	            //地址
        addressProvince:'',	    //地址-省
        addressCity:'',	        //地址-市
        addressArea:'',	        //地址-区县
        contacts:'',	          //联系人
        phone:'',	              //联系电话
        bankName:'',	          //开户行名称
        bankAccount:'',	        //银行账户
        wechatPayMchid:''	      //微信支付商户号
      })
      const rules = ref({
        division:[
          { required: true, message: "请选择区划", trigger: "blur" },
        ],
        name:[
          { required: true, message: "请输入公司名称", trigger: "blur" },
        ],
        code:[
          { required: true, message: "请输入组织机构代码", trigger: "blur" },
        ]
      })
      function showpop(row?:any){
        openpop.value = true
        yysRef.value?.resetFields()
        if(row){
          slecas.value = row.divisionNo

          addata.pkId = row.pkId
          addata.name = row.name
          addata.code = row.code
          addata.division = row.division	                
          addata.divisionNo = row.divisionNo	            	                    
          addata.address = row.address	                  
          addata.addressProvince = row.addressProvince    
          addata.addressCity = row.addressCity	          
          addata.addressArea = row.addressArea	          
          addata.contacts = row.contacts	                
          addata.phone = row.phone	                      	                    	      
          addata.logo = row.logo	
          addata.bankName = row.bankName	          
          addata.bankAccount =	row.bankAccount        
          addata.wechatPayMchid =	row.wechatPayMchid      
        }
      }

      //保存
      function handleAdd() {
        yysRef.value?.validate((valid:Boolean) => {
            if (valid) {
              updateyys(addata).then(() => {
                ElMessage({
                    type: 'success',
                    message: '修改成功'
                })
                setTimeout(()=> {
                    openpop.value = false
                },600)
            })
            }
        })
      }

    //取消
    function cancel() {
      openpop.value = false
    }

    
    //获取区划
    let options = ref<any>([])
    let cascader = ref()
    let alllsle = ref('')

    //处理选中值
    function change(v:any) {
      if(cascader.value.getCheckedNodes().length>0){
        alllsle.value= cascader.value.getCheckedNodes()[0].pathLabels

        addata.division = alllsle.value[2]  //区划名称
        addata.divisionNo = v[2]	          //区划编码	 

        addata.addressProvince = alllsle.value[0]         //地址-省
        addata.addressCity = alllsle.value[1]	            //地址-市
        addata.addressArea = alllsle.value[2]	            //地址-区县
      }else{
        addata.division = ''
        addata.divisionNo = ''
        addata.addressProvince = ''     
        addata.addressCity = ''	        
        addata.addressArea = ''	       
      }
      
    }
    getArea({}).then(rps => {
      options.value = rps.data
    })


    //文件上传
    let imageUrl = ref('')
    const handleAvatarSuccess: UploadProps['onSuccess'] = (
      response,
      uploadFile
    ) => {
      imageUrl.value = URL.createObjectURL(uploadFile.raw!)
    }

    const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
      if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('请选择jpg格式')
        return false
      } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('请选择小于 2MB的图片')
        return false
      }
      return true
    }

    let xqobj = ref<any>({})
    getlist({}).then(rps => {
      xqobj.value = rps.data
    })
  </script>
  <style lang="less" scoped>
    .neirong{
      padding-bottom: 20px;
      font-size: 18px; 
      color: #414141;
      span{
        color: #094079;
      }
    }
  </style>