<template>
    <div>
        <el-card :body-style="cardBodyStyle">
            <el-form :inline="true">

              <el-form-item label="审核状态" style="margin-bottom: 5px;" prop="ftransname">
                <Selector :value="query.reviewState" :width="200"  dicType="REVIEW_STATE" @change="typeChange4">
                </Selector>
              </el-form-item>
                        <el-form-item label="承运商名称" style="margin-bottom: 5px;" prop="ftransname">
                            <el-input v-model="query.ftransname" placeholder="请输入承运商名称"
                                      clearable></el-input>
                        </el-form-item>
                        <el-form-item label="承运商负责人" style="margin-bottom: 5px;" prop="ftransdirector">
                            <el-input v-model="query.ftransdirector" placeholder="请输入承运商负责人"
                                      clearable></el-input>
                        </el-form-item>
                        <el-form-item label="承运商负责人联系方式" style="margin-bottom: 5px;" prop="ftransdirectorphone">
                            <el-input v-model="query.ftransdirectorphone" placeholder="请输入负责人联系方式"
                                      clearable></el-input>
                        </el-form-item>
            </el-form>
        </el-card>

      <el-card :body-style="cardBodyStyle">
        <el-form-item style="margin-bottom: 0px;">
          <el-button plain type="primary" @click="handleSearch">查询</el-button>
          <el-button plain type=" " @click="CancelSearch">取消</el-button>
        </el-form-item>
      </el-card>
        <el-card :body-style="cardBodyStyle">
            <el-table :data="tableData" border highlight-current-row  @selection-change="handleSelectionChange">
                <el-table-column type="selection" fixed></el-table-column>
                <el-table-column type="index" label="序号" align="center" width="60">
                    <template #default="scope">
                        <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
                    </template>
                </el-table-column>
                        <el-table-column v-if="true" prop="ftransname" label="承运商名称" width="200"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="true" prop="ftransdirector" label="承运商负责人" width="150"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="true" prop="ftransdirectorphone" label="负责人联系方式" width="150"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="true" prop="ftransdescribe" label="详细描述" width="150"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>

              <el-table-column label="账号状态" width="250" header-align="center" align="center">
                <template #default="{ row }">

                  <el-switch
                      class="mb-2"
                      active-text="启用"
                      inactive-text="停用"
                      v-model="row.accoutState"
                      active-value="0"
                  inactive-value="1"
                  :disabled="row.reviewState !== '5'"
                  @change="handleSwitchChange(row)">
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column
                  v-if="true"
                  :prop="reviewStateProp"
                  label="审核状态"
                  width="150"
                  header-align="center"
                  align="center"
                  show-overflow-tooltip>
                <template #default="{ row }">
                  {{ reviewStateMap[row.reviewState] || '未知' }}
                </template>
              </el-table-column>

                <el-table-column label="操作" header-align="center" align="center" width="200px">
                    <template #default="scope">
                        <el-button plain type="warning" @click="handleEdit(scope.row)">审核</el-button>

                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-card :body-style="cardBodyStyle">
            <el-pagination  :current-page="currentPage"  :page-size="pageSize" :page-sizes="pageSizes"
                           :total="totalRows" background="background" layout="total, sizes, prev, pager, next, jumper"
                           @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
        </el-card>


        <el-dialog class="diaClass" :close-on-click-modal="false" draggable title="审核页面-请认真审核" v-model="dialogVisible" width="1500px"
                   top="5vh"  @open="openDialog">

            <el-card >
              <template #header>
            <el-form :model="form" label-width="150px" label-position="right" inline ref="ruleFormRef" :rules="rules" >

                <el-form-item label="资金注册"  >
                    <el-input v-model="form.fundRegist" disabled clearable style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="资金币种"  >
                    <el-input v-model="form.fundCurrency" disabled clearable style="width: 200px"></el-input>
                </el-form-item>
              <el-form-item label="税号"  >
                <el-input v-model="form.tax" disabled clearable style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="开户银行"  >
                <el-input v-model="form.bank" disabled clearable style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="银行账号"  >
                <el-input v-model="form.bankAccount" disabled clearable style="width: 200px"></el-input>
              </el-form-item>

              <el-form-item label="法人代表"  >
                <el-input v-model="form.corporation" disabled clearable style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="法人手机号"  >
                <el-input v-model="form.corporationPhone" disabled clearable style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="法人电话号码"  >
                <el-input v-model="form.corporationNumber" disabled clearable style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="法人传真号码"  >
                <el-input v-model="form.corporationFax" disabled clearable style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="法人电子邮箱"  >
                <el-input v-model="form.corporationMailbax" disabled clearable style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="企业网址"  >
                <el-input v-model="form.businessWebsite" disabled clearable style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="授权人手机号"  >
                <el-input v-model="form.authorizer" disabled clearable style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="授权人电话号码"  >
                <el-input v-model="form.authorizerNumber" disabled clearable style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="授权人传真号码"  >
                <el-input v-model="form.authorizerFax" disabled clearable style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="授权人电子邮箱"  >
                <el-input v-model="form.authorizerMailbax" disabled clearable style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="能力描述"  >
                <el-input v-model="form.capaDescription" disabled clearable type="textarea" style="width: 200px"
                          :rows="1">
                </el-input>
              </el-form-item>
              <el-form-item label="通讯地址"  >
                <el-input v-model="form.mailAddress" disabled clearable type="textarea" style="width: 200px"
                          :rows="1">
                </el-input>
              </el-form-item>
            </el-form>
          </template>

              <el-form :model="form" label-width="150px" label-position="right" inline ref="ruleFormRef" :rules="rules">
              <div>
                <el-form-item label="审核未通过回复" prop="reviewRes">
                  <el-input v-model="form.reviewRes" :disabled="!showReviewInput" type="textarea" :rows="1" clearable style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="承运商类别" prop="carrierType">
                  <el-select
                      v-model="form.carrierType"
                      :disabled="!showCarrierInput"
                      clearable
                      style="width: 200px"
                      @change="typeChange3"
                  >
                    <el-option
                        v-for="option in options"
                        :key="option.value"
                        :label="option.label"
                        :value="option.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              </el-form>
              <div style="display: flex; justify-content: flex-end;">
                <el-button type="success" @click="approved">审核通过</el-button>
                <el-button type="danger" @click="notApproved">审核未通过</el-button>
              </div>

            </el-card>
        </el-dialog>
    </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 showCarrierInput = ref(false);
    const showReviewInput = ref(false);
    const typeChange4 = (val) => {
      query.value.reviewState = val
    }
    const options = [
      { value: '0', label: '普通承运商' },
      { value: '1', label: '特殊承运商' },
      // 更多选项...
    ];
    //审核状态字典
    // 审核状态映射
    const reviewStateMap = reactive({
      1: '提交申请',
      5: '审核通过',
      9: '审核不通过'
    });
    const reviewStateProp = 'reviewState';
    function typeChange3(value) {
      console.log('承运商类别变更:', value);
    }

    // 处理审核通过的逻辑
    function approved() {
      showCarrierInput.value = true;
      showReviewInput.value = false;
      form.value.reviewRes=''
      console.log('审核通过');
      if (!form.value.carrierType) {
        alert('请选择承运商类别');
        return
      }
        handleSave();

    }

 //账号停用启用逻辑
    const handleSwitchChange = (row) => {
      form.value=row
      accoutState();
    }

    // 处理审核未通过的逻辑
    function notApproved() {
      showReviewInput.value = true;
      showCarrierInput.value = false;
      form.value.carrierType=''
      if (!form.value.reviewRes) {
        alert('请输入审核未通过的原因');
        return;
      }
        handleSave();
    }

    /**
     *   查询
     */

    const query = ref({
      reviewState:'',
      ftranscode: '',
      ftransname: '',
      ftransdirector: '',
      ftransdirectorphone: '',
      ftransdescribe: '',
      ftransroute: '',
      frecommendperson: '',
      fother: ''
   })
   const tableData = ref([])
   const handleSearch = () => {
       currentPage.value = 1
       getTableData()
   }
    const CancelSearch = () => {
      query.value = {}
      handleSearch()
    }
   const getTableData = () => {
       var url = 'tms/Carrier/query'
       var param = {
           page: currentPage.value,
           rows: pageSize.value,
           params: JSON.stringify(query.value)
       }
       proxy.$axios.get(url, param).then(response => {
            if (response.data.code == '0') {
                tableData.value = response.data.data.records
                totalRows.value = response.data.data.total

            } else {
                ElMessage.error('操作失败！' + response.data.msg)
            }
        })
    }
    /**
     *   查询
     */

    /**
     * 分页
     */
    const currentPage = ref(1)
    const totalRows = ref(0)
    const pageSizes = ref([5, 10, 20, 30, 40])
    const pageSize = ref(5)
    const handleSizeChange = (val) => {
        pageSize.value = val
        getTableData()
    }
    const handleCurrentChange = (val) => {
        currentPage.value = val
        getTableData()
    }
    /**
     * 分页
     */


    /**
     * 新增
     */
    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:'',
      carrierType:'',
    })
    const ruleFormRef = ref()
    const rules = reactive({

    })

    const handleAdd = () => {
        form.value = {
            ftranscode: '', 
            ftransname: '', 
            ftransdirector: '', 
            ftransdirectorphone: '', 
            ftransdescribe: '', 
            ftransroute: '', 
            frecommendperson: '', 
            fapplystoragetime: '', 
            fstoragetime: '', 
            fstorageperson: '', 
            fother: ''
        }
        dialogVisible.value = true
    }
    /**
     * 新增
     */


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

    const openDialog=()=>{
    }

    const handleSave = () => {
                var url = 'tms/Audit/AuditCarrier'
                var param = {
                    json: JSON.stringify(form.value),
                }
                proxy.$axios.post(url, param).then(response => {
                    if (response.data.code == 0) {
                        form.value = response.data.data
                        ElMessage({
                            message: '保存成功',
                            type: 'success',
                        })
                        getTableData()
                        dialogVisible.value = false
                    } else {
                        // ElMessage.error('操作失败！' + response.data.msg)
                        ElMessage({
                            message: '操作失败' + response.data.msg,
                            type: 'error'
                        })
                    }
                })
        }
    const accoutState = () => {
      var url = 'tms/Audit/AccoutState'
      var param = {
        json: JSON.stringify(form.value),
      }
      proxy.$axios.post(url, param).then(response => {
        if (response.data.code == 0) {
          form.value = response.data.data
          ElMessage({
            message: '保存成功',
            type: 'success',
          })
          getTableData()
          dialogVisible.value = false
        } else {
          // ElMessage.error('操作失败！' + response.data.msg)
          ElMessage({
            message: '操作失败' + response.data.msg,
            type: 'error'
          })
        }
      })
    }
    const handleCancelSave = () => {
      form.value.carrierType=''
      form.value.reviewRes=''
      showCarrierInput.value=false
      showReviewInput.value=false

        dialogVisible.value = false

    }
    const handleEdit = (row) => {

        dialogVisible.value = true
        form.value = row
    }
    const handleDelete = (row) => {
        ElMessageBox.confirm(
            '确定删除本条记录?',
            '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
                draggable: true,
            }
        )
            .then(() => {
                var url = 'tms/Carrier/remove'
                var param = {
                    id: row.id
                }
                proxy.$axios.post(url, param).then(response => {
                    if (response.data.code == 0) {
                        ElMessage({
                            type: 'success',
                            message: '删除成功',
                        })
                        getTableData()
                    } else {
                        ElMessage({
                            type: 'error',
                            message: '删除失败' + response.data.msg
                        });
                    }
                });
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消',
                })
            })
    }

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

    const multipleSelection = ref([])
    const handleSelectionChange = (val) => {
        multipleSelection.value = val
    }

    const handleRemoveBatch = () => {
        console.log('handleRemoveBatch')

        if (multipleSelection.value.length < 1) {
            ElMessage({
                type: 'warning',
                message: '请选择要删除的数据!'
            })
            return
        }

        ElMessageBox.confirm('此操作将删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            var ids = []
            multipleSelection.value.forEach((item, index) => {
                ids.push(item.id)
            })
            var url = 'tms/Carrier/removeBatch'
            var param = {
                ids: JSON.stringify(ids)
            }
            proxy.$axios.post(url, param).then(response => {
                if (response.data.code == '0') {
                    ElMessage({
                        type: 'success',
                        message: '操作成功!',
                    });
                    getTableData()
                    dialogVisible.value = false
                } else {
                    ElMessage({
                        type: 'error',
                        message: '操作失败!' + response.data.msg
                    });
                }
            })
        }).catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除'
            })
        })
    }

    const handleEditBatch = () => {
        console.log('handleEditBatch')
        if (multipleSelection.value.length != 1) {
            ElMessage({
                type: 'warning',
                message: '请选择一条数据编辑!'
            })
            return
        }
        handleEdit(multipleSelection.value[0])
    }

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

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

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

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

</script>

<style scoped>

</style>