<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="popshow" 
      :title="poptit" 
      width="500px" 
      append-to-body
      align-center
    >

      <el-form ref="typeform" :model="addObj" :rules="rules" label-width="120px">
        <el-form-item label="型号名称" prop="typeName">
          <el-input v-model="addObj.typeName" placeholder="请输入类型名称" />
        </el-form-item>
        <el-form-item label="类型编码" prop="typeCode">
          <el-input v-model="addObj.typeCode" placeholder="请输入类型编码" />
        </el-form-item>
        <el-form-item label="车辆厂商" prop="manufacturer">
          <el-input v-model="addObj.manufacturer" placeholder="请输入车辆厂商" />
        </el-form-item>
        <el-form-item label="公告号" prop="announceNum">
          <el-input v-model="addObj.announceNum" placeholder="请输入公告号" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="save">确 定</el-button>
          <el-button @click="canceltype">取 消</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script lang="ts" setup>
  import { 
    getdicttype,
    adddicttype,
    update,
    deltype
  } from '@/api/systemSet/cartype'
  import { ref,reactive } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'

  
  //查询  
  let total = ref(0)          
  let queryParams = reactive({
    pageSize:20,	        //每页条数
    pageNo:1,
    typeName:''	          //类型名称
    // typeCode:''	      //类型编码
   })

   let dictlist = ref([])
   function querytype() {
    dictlist.value.splice(0)
    getdicttype(queryParams).then(rps => {
      dictlist.value = (rps.data as any).records
      total.value = (rps.data as any).total
    })
   }

   let queryRef = ref()
   function resetQuery() {
    queryRef.value?.resetFields()
   }

   function search() {
    queryParams.pageNo = 1
    querytype()
   } 
  
   function handleSizeChange(val:number) {
      queryParams.pageSize = val
      querytype()
   }

   //新增、修改
   let cztype = ref(1)
   let typeform = ref()
   let popshow = ref(false) 
   let poptit = ref('添加型号')
   let addObj = reactive({
      pkId:'',
      typeName:'',	        //类型名称
      typeCode:'',	        //类型编码
      manufacturer:'',	    //车辆厂商
      announceNum:''	      //公告号
    })
    const rules = {
      typeName: [
          { required: true, message: "请输入类型名称", trigger: "blur" },
      ],
      typeCode:[
          { required: true, message: "请输入类型编码", trigger: "blur" },
      ],
      manufacturer: [
          { required: true, message: "请输入车辆厂商", trigger: "blur" },
      ],
      announceNum:[
          { required: true, message: "请输入公告号", trigger: "blur" },
      ]
    }
    function caoztype() {
      if(cztype.value == 1){
        return adddicttype(addObj) 
      }
      return update(addObj)
    }

    function showpop(type:number,row?:any) {
      cztype.value = type
      popshow.value = true
      poptit.value = type == 1?'添加类型':'修改类型'
      typeform.value?.resetFields()
      if(row){
        addObj.pkId = row.pkId
        addObj.typeName = row.typeName	                    
        addObj.typeCode = row.typeCode	                    
        addObj.manufacturer = row.manufacturer	  
        addObj.announceNum = row.announceNum	    
      }else{
        addObj.pkId = ''
        addObj.typeName = ''	                    
        addObj.typeCode = ''	                    
        addObj.manufacturer = ''	  
        addObj.announceNum = ''	   
      }
    }

    //保存
    function save() {
      typeform.value?.validate((valid:Boolean) => {
        if (valid) {
          caoztype().then(() => {
            ElMessage({
              type: 'success',
              message: cztype.value == 1?'添加成功':'修改成功'
            })
            setTimeout(() => {
              popshow.value = false
              search()
            },1000)
          })
        }
      })
    }


    function canceltype() {
      popshow.value = false
    }

   querytype()
</script>
<style lang="less" scoped>
  .neirong{
    padding-bottom: 20px;
    font-size: 18px; 
    color: #414141;
    span{
      color: #094079;
    }
  }
</style>
