<template>
  <!-- 临时巡查填报 -->
  <div class="taskFormRiver">
    <van-form @submit="onSubmitData">
      <div class="ContentView" id="ContentViewRiver">
        <van-field
          v-model="AllData.patrolTargetIdText"
          rows="2"
          autosize
          label="项目名称"
          type="textarea"
          :disabled="true"
        />

        <!-- <van-field
          v-model="AllData.formData.problemType"
          label=""
          placeholder="请输入问题类型"
          show-word-limit
          required
          :rules="[{ required: true, message: '请输入问题类型' }]"
        /> -->

        <van-field
          label="检查项"
          placeholder="请选择检查项"
          show-word-limit
          required
          is-link
          readonly
          @click="AllData.showPicker = true"
          :rules="[{ required: true, message: '请选择检查项' }]"
          v-model="AllData.userId"
        />
        <van-popup v-model:show="AllData.showPicker" round position="bottom" :close-on-click-overlay="false">
          <!-- <van-picker :columns="inspection_items" @confirm="onConfirmOne" @cancel="AllData.showPicker = false">
          </van-picker> -->
          <div class="py-4 h-60">
            <div class="chooseBox">
              <span class="ml-4" @click="closeClick">重置</span><span class="mr-4" @click="handleBoxClick">确认</span>
            </div>
            <van-checkbox-group v-model="AllData.checkBox">
              <van-cell v-for="(item, index) in inspection_items" :key="index" :title="`${item.text}`">
                <template #right-icon>
                  <van-checkbox :name="item" />
                </template>
              </van-cell>
            </van-checkbox-group>
          </div>
        </van-popup>

        <van-field
          label="问题类型"
          placeholder="请选择问题类型"
          show-word-limit
          required
          is-link
          readonly
          @click="AllData.showproblem = true"
          :rules="[{ required: true, message: '请选择问题类型' }]"
          v-model="AllData.problemN"
        />
        <van-popup v-model:show="AllData.showproblem" round position="bottom" :close-on-click-overlay="false">
          <div class="py-4 h-60">
            <div class="chooseBox">
              <span class="ml-4" @click="closeProblem">重置</span><span class="mr-4" @click="ProblemClick">确认</span>
            </div>
            <van-checkbox-group v-model="AllData.problemBox">
              <van-cell v-for="(item, index) in problem_type" :key="index" :title="`${item.text}`">
                <template #right-icon>
                  <van-checkbox :name="item" />
                </template>
              </van-cell>
            </van-checkbox-group>
          </div>
        </van-popup>

        <van-field label="整改状态" name="caseLevel" required :rules="[{ required: true, message: '请选择整改状态' }]">
          <template #input>
            <van-radio-group v-model="AllData.formData.isRectification" direction="horizontal">
              <van-radio :name="item.value" v-for="item in AllData.formOptions.case_level" :key="item.value">
                {{ item.label }}
              </van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field
          v-model="AllData.formData.problemContent"
          rows="2"
          autosize
          label="问题描述"
          type="textarea"
          maxlength="200"
          placeholder="请输入问题描述"
          show-word-limit
        />

        <div class="mediumList">
          <span class="Title">现场图片(最多9张)</span>
          <div class="picBox">
            <UploadImg
              :maxCount="9"
              :saveFileArr="AllData.formData.sysFileSaveRequestList"
              :acceptFormat="'image/*'"
              @update:saveFileArr="getImgList"
            />
          </div>
        </div>
      </div>
      <div class="BottomView">
        <van-button @click="closeDaKa" class="BotBtn">返回</van-button>
        <van-button native-type="submit" class="BotBtn" type="primary">提交</van-button>
      </div>
    </van-form>
  </div>
</template>
<script setup>
import UploadImg from '@/views/components/uploadFile.vue';
import { getProjectInfoList, patrolProblemadd } from '@/api/xuncha';
import { useRouter, useRoute } from 'vue-router';
import { timestampToTime, getCurrentPositon } from '@/utils/common.js';
import CoordTransform from '@/utils/gis/CoorTransform.js';
import { useDictA } from '@/utils/dict';
const { inspection_items, problem_type } = useDictA('inspection_items', 'problem_type');

// 添加高德安全密钥
window._AMapSecurityConfig = {
  securityJsCode: '3dd53164a25d70df97e74da0ef5ca5ec',
};
// 获取父组件传过来的patrolLogId
const props = defineProps({
  numberNum: String,
  projectName: String,
  projectCode: String,
  uploadType: String,
});
const { proxy } = getCurrentInstance();
const emits = defineEmits(['closeFormTransition']);
const closeDaKa = () => {
  emits('closeFormTransition', 'AnJianUpdatas');
};
const route = useRoute();
const AllData = reactive({
  ShowHedao: false,
  range3: [],
  checkBox: [],
  problemBox: [],
  showPicker: false,
  showproblem: false,
  userId: '',
  problemN: '',
  formData: {
    problemType: '',
    sysFileSaveRequestList: [], //获取的图片数组
    taskName: '',
    checkItem: '',
    checkItemName: '',
    problemTypeName: '',
    isRectification: '2',
    problemContent: '',
    projectNo: '',
    uploadType: '',
    lonLat: '',
    problemAddress: '',
  },
  patrolTargetIdText: '',
  formOptions: {
    case_level: [
      { value: '2', label: '需要整改' },
      { value: '1', label: '无需整改' },
    ],
    caseTypeData: [],
  },
});
const multiple = ref(true);
// 获取上传的图片
function getImgList(e) {
  e.forEach((item) => {
    item.refField = 'pat_problem';
  });
  AllData.formData.sysFileSaveRequestList = e;
}
// 选着
const onConfirmOne = (selectedOptions) => {
  console.log(selectedOptions, 'selectedOptions');
};
// 项目接口
async function projectTypeListM() {
  let { data } = await getProjectInfoList();
  AllData.range3 = data.map((v) => {
    return {
      value: v.projectNo,
      text: v.projectAbbreviation,
    };
  });
}

// 提交上报
const onSubmitData = async () => {
  patrolProblemadd(AllData.formData).then((response) => {
    proxy.showSuccessToast('上报成功');
    closeDaKa();
  });
};

// 检查项关闭
const closeClick = () => {
  AllData.showPicker = false;
  AllData.userId = '';
  AllData.checkBox = [];
};

// 问题类型关闭
const closeProblem = () => {
  AllData.showPicker = false;
  AllData.problemN = '';
  AllData.problemBox = [];
};

// 问题类型保存
const ProblemClick = () => {
  AllData.showproblem = false;
  console.log(AllData.checkBox, 'AllData.checkBox');
  let problemName = [];
  let Typeb = [];
  AllData.problemBox.forEach((element) => {
    problemName.push(element.text);
    Typeb.push(element.value);
  });
  AllData.problemN = String(problemName);
  console.log(AllData.problemN, '123');
  AllData.formData.problemTypeName = problemName.join(',');
  AllData.formData.problemType = Typeb.join(',');
};

// 检查项保存
const handleBoxClick = () => {
  AllData.showPicker = false;
  console.log(AllData.checkBox, 'AllData.checkBox');
  let problemName = [];
  let Typeb = [];
  AllData.checkBox.forEach((element) => {
    problemName.push(element.text);
    Typeb.push(element.value);
  });
  AllData.userId = String(problemName);
  AllData.formData.checkItemName = problemName.join(',');
  AllData.formData.checkItem = Typeb.join(',');
};

watch(
  route,
  (val) => {
    console.log(props, 'props');
    //option为object类型，会序列化上个页面传递的参数
    AllData.formData.projectNo = props.projectCode;
    AllData.patrolTargetIdText = props.projectName;
    AllData.formData.patrolTaskNo = props.numberNum;
    //2:临时巡查 1任务巡查 uploadType
    AllData.formData.uploadType = props.uploadType;
  },
  { immediate: true }
);
onMounted(() => {
  projectTypeListM();
  getCurrentPositon((lng, lat, address) => {
    let NewLonLat = CoordTransform.gcj02towgs84(Number(lng), Number(lat));
    AllData.formData.lonLat = String(NewLonLat);
    AllData.formData.problemAddress = address;
  });
});
</script>
<style lang="less">
.taskFormRiver {
  width: 100%;
  background: #fafafa;

  .ContentView {
    width: 100%;
    background-color: #ececec;
    box-sizing: border-box;
    padding: 20px 20px;
    overflow: auto;
    .van-radio {
      margin-bottom: 10px;
    }
    .mediumList {
      width: 100%;
      height: auto;

      .Title {
        width: 100%;
        height: 60px;
        line-height: 60px;
        display: inline-block;
      }

      .picBox {
        width: 100%;
        height: auto;
      }
    }
  }
  .BottomView {
    width: 100%;
    height: 120px;
    display: flex;
    justify-content: space-around;
    margin-top: 20px;

    .BotBtn {
      width: 45%;
    }
  }
}
.chooseBox {
  // border: 1px solid red;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  height: 80px;

  span {
    font-size: 32px;
  }
}
</style>