<template>
	<div class="address_edit">
		<!-- 导航栏 -->
		<!--<div class="header_body">
			<header-nav :slefBack="true" @goBack="goBack" :titelText="`执法信息详情`"></header-nav>
		</div>
    -->
		<!-- 中间 -->
		<div class="warp_body">
            <van-form @failed="onFailed" @submit="submit">
                <van-cell-group>
                    <div class="zf-name">执法信息</div>
                    <van-field
                      v-model="submitData.lawEnforcement"
                      label="执法部门"
                      readonly
                    />
                    <van-field
                      v-model="submitData.lawEnforcer"
                      label="执法人员"
                      readonly
                    />
                    <van-field v-for="(item, index) in data.lawCer" :key="index"
                      v-model="item.show"
                      label="执法人员"
                      readonly
                      @click="showPopup"
                    />
                    <van-field
                            v-model="submitData.lawFieldText"
                            label="执法领域"
                            readonly
                    />
                    <van-field
                            v-model="submitData.checkCategoryText"
                            label="执法类别"
                            readonly
                    />
                    <!-- <van-field
                      v-model="submitData.subsidiaryer"
                      label="辅助人员"
                      readonly
                      @click="showPopup2"
                    /> -->
                    <view  v-if="null != submitData.enforce">
                        <van-field
                            v-model="submitData.enforce"
                            label="未扫码原因"
                            readonly
                            placeholder="请选择"
                            is-link
                        />
                    </view>
                    <van-field
                      v-model="submitData.lawEnforcementItemText"
                      label="检查事项"
                      rows="2"
                      autosize
                      readonly
                      type="textarea"
                      maxlength="50"
                      placeholder="请输入检查事项"
                      show-word-limit
                    />
                    <van-field v-for="(item, index) in data.lawList" :key="index"
                      v-model="item.text"
                      label="检查依据"
                      placeholder="检查依据"
                      readonly
                      type="textarea"
                      rows="1"
                      autosize
                    />
<!--                    <van-field-->
<!--                      v-model="submitData.reslut"-->
<!--                      required-->
<!--                      label="检查结果"-->
<!--                      :rules="[{ required: true, message: '必填项' }]"-->
<!--                      readonly-->
<!--                    >-->
<!--                        <template #input>-->
<!--                            <div>-->
<!--                                <van-tag :color="data.good">合格</van-tag>-->
<!--                                <van-tag :color="data.bad" style="margin-left: 15px;">不合格</van-tag>-->
<!--                            </div>-->
<!--                        </template>-->
<!--                    </van-field>-->
                    <van-field
                      v-model="submitData.remark"
                      label="备注"
                      rows="2"
                      autosize
                      type="textarea"
                      maxlength="50"
                      show-word-limit
                      readonly
                    />

                    <van-divider class="divdsty" />

                    <div class="file-upload">
                         <div class="file-upload-center">
                            <label>附件</label>
                        </div>
                        <!-- <van-uploader v-model="submitData.fileListObj" accept="" class="file" multiple :max-size="500 * 1024" :after-read="uploadFiles" :before-delete="deleteFile">
                            <template #preview-cover="{ file }">
                                <div class="preview-cover van-ellipsis">{{ file.name }}</div>
                            </template>
                        </van-uploader> -->
                        <div class="zoom">
                            <img
                            v-for="(item, index) in data.imageList"
                              class="img"
                              :src="item"
                              alt="预览图片"
                              @click="imagePreview(index)"
                              :key="index"
                            />
                            <van-image-preview v-model:show="data.show" :images="data.imageList" @change="onChange" ref="imagePre">
                              <template v-slot:index>第{{ index + 1 }}页</template>
                            </van-image-preview>
                          
                          </div>  
                    </div>
                </van-cell-group>
                  
                <van-divider class="divdsty" />

                <van-cell-group>
                    <div class="qy-name">企业信息</div>
                    <van-field
                            v-model="submitData.enterpriseName"
                            required
                            label="企业名称"
                            :rules="[{ required: true, message: '必填项' }]"
                            placeholder="必填 企业名称"
                            readonly
                    />
                    <van-field
                            v-model="submitData.enterpriseNumber"
                            required
                            label="统一社会信用代码"
                            :rules="[{ required: true, message: '必填项' }]"
                            placeholder="必填 统一社会信用代码"
                            readonly
                    />
                </van-cell-group>
                <div v-if="submit.isEvaluate != 0">
                <van-divider class="divdsty" />
                <van-cell-group>
                    <div class="qy-name">评价</div>
                    <van-field
                            v-model="submitData.evaluateDescription"
                            required
                            label="意见|建议"
                            rows="2"
                            autosize
                            readonly
                            type="textarea"
                            maxlength="50"
                            show-word-limit
                    />
                    <div v-if="submitData.authorization !=0">
                      <van-field
                            v-model="submitData.linkman"
                            required
                            label="联系人"
                            :rules="[{ required: true, message: '必填项' }]"
                            readonly
                    />
                    <van-field
                            v-model="submitData.linkmanTel"
                            required
                            label="联系方式"
                            :rules="[{ required: true, message: '必填项' }]"
                            readonly
                    />
                    </div>
                </van-cell-group>
              </div>
            </van-form>
        </div>
<!-- 
        <Popup :visible="data.popupVisible" :content="data.popupContent" @close="closePopup" @reciveData="reciveData" />
        <Popup :visible="data.popupVisible2" :content="data.popupContent2" @close="closePopup" @reciveData="reciveData2" /> -->
	</div>
</template>

<script setup name="register">

import { showSuccessToast,showImagePreview } from 'vant';
import {queryEnforcementRegistrationById, getAttr} from '../../api/enforce'
import { reactive, ref,nextTick } from "vue";
import {uploadFile} from "../../util/fileUpload";
import {getDict} from "../../api/Home";
import {queryLinkageById} from "../../api/linkage";
//用户筛选弹窗
// import Popup from './userFilter.vue';

const { useMy } = $globalStore

const router = useRouter();
//路由参数
const route = useRoute();
const data = reactive({
    showLawEnforcerFlag:false,
    currentPage: 1,
    good:"#7FFFD4",
    bad:"#D3D3D3",
    popupVisible: false,
    popupContent: '',
    popupVisible2: false,
    popupContent2: '',
    imgstr: "",
    lawList: [{ text:"", id:"" }],
    lawCer:[{ text:"", id:"" }],
    imageList:[],
    show: ref(false)
});
//保存参数
const submitData = reactive({
    //执法部门
    lawEnforcement:"",
    lawEnforcementId:"",
    //执法人员1
    lawEnforcer:"",
    lawEnforcerId:"",
    //执法人员2
    lawEnforcerTwo: "",
    lawEnforcerIdTwo: "",
    //辅助人员
    subsidiaryer: "",
    subsidiaryerId: "",
    //执法事项
    lawEnforcementItem:"",
    enforce:"",
    //执法依据
    lawEnforcementBasis:"",
    //执法结果
    reslut:0,
    //备注
    remark:"",
    //企业名称
    enterpriseName:"",
    //统一信用码
    enterpriseNumber:"",
    //后台保存图片列表
    fileList:[],
    //vant组件上传照片列表
    fileListObj:[],
    /**局级部门 */
    bureauDeptName:"",
    bureauDeptId:"",
    evaluateDescription:"",
    linkman:"",
    linkmanTel:"",
    isEvaluate: 0,
    authorization:0,
    lawFieldText:"",
    checkCategoryText:"",
})

const tapGood = () => {
    data.good = "#7FFFD4";
    data.bad = "#D3D3D3";
    submitData.reslut = 0;
}
const tapBad = () => {
    data.good = "#D3D3D3";
    data.bad = "#7FFFD4";
    submitData.reslut = 1;
}
const index = ref(0);
const imagePreview = (newIndex) =>{
    var imgstrArr = data.imgstr.split(",");
//   showImagePreview({
//     images:data.imageList[index],
//     startPosition: index,
// });

nextTick(() => {
  //  console.log(this.$refs.testRef)
  //  this.$refs.imagePre.change(newIndex)
  // const imagePre = ref("imagePre");
  // imagePre.change(newIndex);
});
// index.value = newIndex;
data.show = ref(true);

}

const setLinkageItem = (id) => {
    queryLinkageById({"id": id}, success => {
        submitData.lawEnforcementItem = success.title
    },error=>{});
}
const setLinkageGA = (id) => {
    queryLinkageById({"id": id}, success => {
        submitData.lawEnforcementBasis = success.title
    },error=>{});
}

const setAttr = () =>{
    // 查询检查要求字典信息
    getAttr(route?.query?.id, success => {
        if (success.data.filePreview != null) {
            if(success.data.filePreview.fileList != null) {
                for (var i=0; i<success.data.filePreview.fileList.length; i++) {
                    data.imgstr += success.data.filePreview.fileList[i] + ",";
                }
                data.imgstr = data.imgstr.substring(0, data.imgstr.length - 1);
            }
            data.imageList = success.data.filePreview.fileList;
            success.data.filePreview.fileList;
            for (const key in success.data.filePreview.fileList) {
              console.log(success.data.filePreview.fileList[key]);
              data.imageList[key] = success.data.filePreview.fileList[key];
            }
            
        }
    },error=>{});
}

const onChange = (newIndex) => {
    index.value = newIndex;
};
//3a0096181c184e5aa56f70923680856d$6e74ceda1463c165fd43eeeadce4f7cd
//初始化参数，获取扫码的企业统一信用编码
onMounted(() =>{
 

    //查询执法登记信息
    queryEnforcementRegistrationById(route?.query?.id,success =>{
        submitData.enterpriseName = success.data.enterpriseName;
        submitData.enterpriseNumber = success.data.enterpriseNumber;
        // submitData.lawEnforcement = success.data.lawEnforcement;
        //执法部门
        submitData.lawEnforcement = success.data.bureauDeptName;
        submitData.lawEnforcerTwo = success.data.lawEnforcerTwo;
        submitData.subsidiaryer = success.data.subsidiaryer;
        submitData.lawEnforcementId = success.data.lawEnforcementId;
        submitData.lawEnforcementItem = success.data.lawEnforcementItem;
        submitData.lawEnforcementItemText = success.data.lawEnforcementItemText;
        // submitData.lawEnforcementBasis = success.data.lawEnforcementBasis;
        // submitData.lawEnforcementBasisText = success.data.lawEnforcementBasisText;
        // submitData.lawEnforcerIdTwo = success.data.lawEnforcerIdTwo;
        submitData.lawEnforcer = success.data.lawEnforcer;
        submitData.remark = success.data.remark;
        submitData.enforce = success.data.enforce;
        // 执法领域
        submitData.lawFieldText = success.data.lawFieldText;
        // 执法类别
        submitData.checkCategoryText = success.data.checkCategoryText;
        //评价信息
        submitData.isEvaluate = success.data.isEvaluate;
        if (null != success.data.enterpriseEvaluate && "" != success.data.enterpriseEvaluate) {
            submitData.evaluateDescription = success.data.enterpriseEvaluate.evaluateDescription;
            submitData.linkman = success.data.enterpriseEvaluate.linkman;
            submitData.linkmanTel = success.data.enterpriseEvaluate.linkmanTel;
            submitData.authorization = success.data.enterpriseEvaluate.authorization;
        }

        if(success.data.reslut == 0){
          data.good = "#7FFFD4";
          data.bad = "#D3D3D3";
        }else{
          data.good = "#D3D3D3";
          data.bad = "#7FFFD4";
        }

        // 执法依据
        submitData.lawEnforcementBasis = success.data.lawEnforcementBasis;
        submitData.lawEnforcementBasisText = success.data.lawEnforcementBasisText;
        if ((null != submitData.lawEnforcementBasis && submitData.lawEnforcementBasis.length > 0)
            && (null != submitData.lawEnforcementBasisText && submitData.lawEnforcementBasisText.length > 0)) {
            var tmpBasis = submitData.lawEnforcementBasis.split(',');
            var tmpBasisText = submitData.lawEnforcementBasisText.split(',');
            data.lawList = [];
            for (var i = 0; i < tmpBasis.length; i++) {
                data.lawList.push({text: tmpBasisText[i], id: tmpBasis[i]});
            }
        }

        // 执法人员
        submitData.lawEnforcerIdTwo = success.data.lawEnforcerIdTwo;
        submitData.lawEnforcerTwo = success.data.lawEnforcerTwo;
        var lawEnforcer2ShowStr = success.data.lawEnforcer2Show;
        if ((null != submitData.lawEnforcerIdTwo && submitData.lawEnforcerIdTwo.length > 0)
            && (null != submitData.lawEnforcerTwo && submitData.lawEnforcerTwo.length > 0)) {
            var tmpEnforceId = submitData.lawEnforcerIdTwo.split(',');
            var tmpEnforceText = submitData.lawEnforcerTwo.split(',');
            var lawEnforcer2Show = lawEnforcer2ShowStr.split(',');
            data.lawCer = [];
            for (var i = 0; i < tmpEnforceId.length; i++) {
                data.lawCer.push({text: tmpEnforceText[i], id: tmpEnforceId[i], show: lawEnforcer2Show[i]});
            }
        }

        // setLinkageItem(submitData.lawEnforcementItem);
        // setLinkageGA(submitData.lawEnforcementBasis);
        
    },error=>{

    })

    setAttr();
})

// 返回
const goBack = () => {
	router.go(-1);
};



const uploadFiles = (file) =>{
    uploadFile(file,(res) =>{
        console.log(res);
        submitData.fileList.push(res.url)
        console.log(submitData.fileList);
    });

}

const deleteFile = (file,index) =>{
    console.log(index);
    submitData.fileListObj.filter((item, indexs) => {
        if (index.index == indexs) {
            submitData.fileListObj.splice(indexs, 1);//splice 删除
        }
    });
    submitData.fileList.filter((item, indexs) => {
        if (index.index == indexs) {
            submitData.fileList.splice(indexs, 1);//splice 删除
        }
    });
    console.log(submitData.fileList);
    return true;
}

const submit = () =>{
    addEnforcementRegistration(submitData,success =>{
    //跳转首页
    if(success.success){
        showSuccessToast('登记成功');
        router.push({ path: "/home" });
    }
  },error=>{
      console.log("登记失败")
  })
}

const showPopup = () =>{
    data.popupVisible = true;
}
const showPopup2 = () =>{
    data.popupVisible2 = true;
}
const closePopup = () =>{
    data.popupVisible = false;
    data.popupVisible2 = false;
}
const reciveData = (item) =>{
    submitData.lawEnforcerTwo = item.userName;
    submitData.lawEnforcerIdTwo = item.userId;
}
const reciveData2 = (item) =>{
    submitData.subsidiaryer = item.userName;
    submitData.subsidiaryerId = item.userId;
}

</script>

<style lang="less" scoped>
.address_edit {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: #ebf3fb;
}

.warp_body {
    margin: 3%;
    padding-bottom: 3rem;
    width: 94%;
    height: 100%;
    //border-radius: 0.25rem;
    background-image: linear-gradient(to bottom, #ebf3fb, #fff);
    overflow-y: auto;
}

.qy-name {
  margin: 0 0.27rem;
  font-size: 0.42rem;
  height: 1.2rem;
  background-color: white;
  font-weight: 600;
  line-height: 3.5;
}

.zf-name {
  margin: 0 0.27rem;
  font-size: 0.42rem;
  height: 1.2rem;
  background-color: white;
  font-weight: 600;
  line-height: 3.5;
}

/* vant4的 Toast 和 Popup 样式冲突,会导致 Toast 变成白底 */
.van-popup.van-toast {
    background: var(--van-toast-background) !important;
    box-sizing: content-box !important;
    /* 下面3条css,影响不大 */
    transition: all var(--van-duration-fast) !important;
    width: var(--van-toast-default-width) !important;
    max-width: var(--van-toast-max-width) !important;
}
.van-popup.van-toast .van-toast__icon {
    font-size: var(--van-toast-icon-size) !important;
}

.divdsty {
    margin: auto;
    width: 100%;
    height: 0.25rem;
    background-color: #f4f4f4;
    border: 0;
}
.file-upload {
    position: relative;
    min-height: 3.0rem;
    max-height: 6.5rem;
    padding: 1rem 0.27rem 0.27rem 0.43rem;
    box-sizing: border-box;
}

.file-upload-center {
    position: absolute;
    top: 0.27rem;
    left: 0.43rem;
    width: 90%;
    height: 0.65rem;
    font-size: 0.38rem;
    span {
      font-size: 0.32rem;
      color: rgb(221, 229, 227);
    }
}
.file {
    position: relative;
    width: 100%;
    height: calc(100% - 1.5rem);
}

/deep/ .van-uploader__upload, /deep/ .van-uploader__preview-image {
    width: 1.95rem !important;
  }

.preview-cover {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 4px;
    color: #fff;
    font-size: 0.32rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
}
.zoom {
    /*margin-top: 0.65rem;
    padding-top: 0.27rem;
    padding-left: 0.27rem;*/
    img {
      width: 1.95rem;
      height: 2rem;
      margin: 0 0.21rem 0.21rem 0;
      font-size: 0.35rem;
    }
}
</style>
