<template>
  <!-- 河道巡查填报 -->
  <div class="taskFormRiver">
    <van-form @submit="onSubmitData">
      <div class="ContentView" id="ContentViewRiver">
        <van-field
          v-model="AllData.patrolTargetIdText"
          is-link
          readonly
          label="项目名称"
          @click="AllData.ShowHedao = true"
          placeholder="请选择项目名称"
          show-word-limit
          required
          :rules="[{ required: true, message: '请输入项目名称' }]"
          :disabled="multiple"
        />
        <van-popup v-model:show="AllData.ShowHedao" round position="bottom">
          <van-picker value-key="" :columns="AllData.range3" @cancel="onCancel" @confirm="onConfirmHedao" />
        </van-popup>
        <van-field
          v-model="AllData.formData.problemType"
          label="问题类型"
          placeholder="请输入问题类型"
          show-word-limit
          required
          :rules="[{ required: true, message: '请输入问题类型' }]"
        />
        <van-field
          v-model="AllData.formData.checkItem"
          label="检查项"
          placeholder="请输入检查项"
          show-word-limit
          required
          :rules="[{ required: true, message: '请输入检查项' }]"
        />
        <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
          required
          :rules="[{ required: true, message: '请输入问题描述' }]"
        />

        <div class="mediumList">
          <span class="Title">现场图片(最多3张)</span>
          <div class="picBox">
            <UploadImg
              :maxCount="3"
              :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';
// 获取父组件传过来的patrolLogId
const props = defineProps({
  numberNum: String,
  projectName: String,
  projectCode: String,
});
const { proxy } = getCurrentInstance();
const emits = defineEmits(['closeFormTransition']);
const closeDaKa = () => {
  emits('closeFormTransition', 'AnJianUpdatas');
};
const route = useRoute();
const AllData = reactive({
  ShowHedao: false,
  range3: [],
  formData: {
    problemType: '',
    sysFileSaveRequestList: [], //获取的图片数组
    taskName: '',
    checkItem: '',
    isRectification: '',
    problemContent: '',
    patrolTaskNo: '',
  },
  patrolTargetIdText: '',
  formOptions: {
    case_level: [
      {
        value: '1',
        label: '无需整改',
      },
      {
        value: '2',
        label: '需要整改',
      },
    ],
    caseTypeData: [],
  },
});
const multiple = ref(true);
// 获取上传的图片
function getImgList(e) {
  e.forEach((item) => {
    item.refField = 'pat_problem';
  });
  AllData.formData.sysFileSaveRequestList = e;
}
// 项目接口
async function projectTypeListM() {
  let { data } = await getProjectInfoList();
  AllData.range3 = data.map((v) => {
    return {
      value: v.projectNo,
      text: v.projectAbbreviation,
    };
  });
}
//项目名称选择
const onConfirmHedao = ({ selectedOptions }) => {
  AllData.ShowHedao = false;
  AllData.patrolTargetIdText = selectedOptions[0].text;
  AllData.formData.taskName = selectedOptions[0].value;
};
const onCancel = () => {
  AllData.ShowHedao = false;
};

// 提交上报
const onSubmitData = async () => {
  console.log(AllData.formData, 'AllData.formData');
  patrolProblemadd(AllData.formData).then((response) => {
    proxy.showSuccessToast('填报成功');
    closeDaKa();
  });
};
watch(
  route,
  (val) => {
    if (!!!route.query.id) return;
    setTimeout(() => {
      //option为object类型，会序列化上个页面传递的参数
      AllData.formData.patrolTaskNo = props.numberNum;
      AllData.patrolTargetIdText = props.projectName;
      AllData.formData.taskName = props.projectCode;
    });
  },
  { immediate: true }
);
onMounted(() => {
  projectTypeListM();
});
</script>
<style lang="less">
.taskFormRiver {
  width: 100%;
  height: calc(100% - 80px);
  background: #fafafa;

  .ContentView {
    width: 100%;
    height: calc(100vh - 360px);
    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%;
    }
  }
}
</style>