<template>
  <div>
    <div
      style="height: 370px"
      class="bg-white"
    >
      <div class="basicInformation">
        <div style="padding-top: 10px;margin-left: 90px">
          <el-image :src="sign" />
        </div>
        <div style="display: flex;align-items: center">
          <el-text
            style="margin-left: 10px"
            size="large"
            tag="b"
          >项目基本信息</el-text>
        </div>
      </div>
      <el-row style="margin-top: 20px">
        <el-col
          :span="16"
          style="margin-left: 90px"
        >
          <el-steps
            class="mb-4"
            style="max-width: 750px"
            :space="250"
            :active="infoSteps"
            simple
          >
            <el-step
              title="甲方信息"
              :icon="Document"
            />
            <el-step
              title="乙方信息"
              :icon="Document"
            />
            <el-step
              title="丙方信息"
              :icon="Document"
            />
          </el-steps>
        </el-col>
        <el-col :span="4">
          <el-form :inline="true">
            <el-form-item>
              <el-button
                size="large"
                :disabled="infoSteps === 0"
                @click="previousPage"
              >
                上一页
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                :disabled="infoSteps === 2"
                type="primary"
                size="large"
                @click="nextPage"
              >下一页</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row style="margin-top: 30px">
        <el-col
          style="margin-left: 90px"
        >
          <el-form
            label-width="100"
            label-position="left"
          >
            <div v-show="infoSteps === 0">
              <el-row>
                <el-col :span="5">
                  <el-form-item
                    label="项目名称"
                    size="large"
                  >
                    <el-input
                      v-model="condition.name"
                      placeholder="请输入项目名称"
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  :span="5"
                  :offset="1"
                >
                  <el-form-item
                    label="项目地址："
                    size="large"
                  >
                    <el-input
                      v-model="condition.address"
                      placeholder="请输入项目地址"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="margin-top: 10px">
                <el-col :span="5">
                  <el-form-item
                    label="甲方电话"
                    size="large"
                  >
                    <el-input
                      v-model="condition.firstPhone"
                      placeholder="请输入甲方负责人电话"
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  :span="5"
                  :offset="1"
                >
                  <el-form-item
                    label="甲方负责人"
                    size="large"
                  >
                    <el-input
                      v-model="condition.firstPrincipal"
                      placeholder="请输入甲方负责人名称"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div v-show="infoSteps === 1">
              <el-row>
                <el-col :span="5">
                  <el-form-item
                    label="乙方负责人"
                    size="large"
                  >
                    <el-select
                      v-model="secondUser"
                      placeholder="请选择人员名称"
                      clearable
                      filterable
                      @change="changeSecond"
                      @clear="clearPeopleSelect"
                    >
                      <el-option
                        v-for="item in userList"
                        :key="item.ID"
                        :label="item.nickName"
                        :value="item.ID"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col
                  :span="5"
                  :offset="1"
                >
                  <el-form-item
                    label="合同金额"
                    size="large"
                  >
                    <el-input-number v-model="condition.projectPrice" />
                  </el-form-item>
                </el-col>
                <el-col
                  :span="5"
                  :offset="1"
                >
                  <el-form-item
                    label="合同签订时间"
                    size="large"
                  >
                    <el-date-picker
                      v-model="condition.signTime"
                      type="date"
                      placeholder="请选择合同签订时间"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      clearable
                      @clear="condition.signTime = ''"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="margin-top: 10px">
                <el-col :span="5">
                  <el-form-item
                    label="进场施工时间"
                    size="large"
                  >
                    <el-date-picker
                      v-model="condition.intoConstructionTime"
                      type="date"
                      placeholder="请选择进场施工时间"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      clearable
                      @clear="condition.intoConstructionTime = ''"
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  :span="5"
                  :offset="1"
                >
                  <el-form-item
                    label="竣工时间"
                    size="large"
                  >
                    <el-date-picker
                      v-model="condition.completedTime"
                      type="date"
                      placeholder="请选择竣工时间"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      clearable
                      @clear="condition.completedTime = ''"
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  :span="8"
                  :offset="1"
                >
                  <el-form-item label="说明">
                    <el-input
                      v-model="condition.illustrate"
                      :rows="5"
                      type="textarea"
                      placeholder="请输入项目说明"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div v-show="infoSteps === 2">
              <el-row>
                <el-col :span="5">
                  <el-form-item
                    label="监理单位"
                    size="large"
                  >
                    <el-input
                      v-model="condition.supervisorUint"
                      placeholder="请输入监理单位"
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  :span="5"
                  :offset="1"
                >
                  <el-form-item
                    label="监理姓名"
                    size="large"
                  >
                    <el-input
                      v-model="condition.supervisorName"
                      placeholder="请输入监理姓名"
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  :span="5"
                  :offset="1"
                >
                  <el-form-item
                    label="监理电话"
                    size="large"
                  >
                    <el-input
                      v-model="condition.supervisorPhone"
                      placeholder="请输入监理电话"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <div
      style="height: 400px;margin-top: 20px;overflow: auto"
      class="bg-white"
    >
      <div class="basicInformation">
        <div style="padding-top: 10px;margin-left: 90px">
          <el-image :src="sign" />
        </div>
        <div style="display: flex;align-items: center">
          <el-text
            style="margin-left: 10px"
            size="large"
            tag="b"
          >项目附属文件</el-text>
        </div>
      </div>
      <el-row style="margin-top: 15px">
        <el-col
          :span="12"
          style="margin-left: 90px"
        >
          <el-alert
            title="请注意立项时上传的文件应包含报价单、施工图、合同、项目立项书、工程清单、财评中心审计后清单表、图审报告"
            type="info"
            show-icon
          />
        </el-col>
      </el-row>
      <el-row style="margin:20px 0 0 90px;">
        <el-col :span="15">
          <el-upload
            class="upload-demo"
            drag
            multiple
            :auto-upload="false"
            :file-list="fileListData"
            :on-change="changeFileData"
            :on-remove="removeFileData"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              请选择需要上传的文件
            </div>
            <template #tip>
              <div class="el-upload__tip">
                选择的文件不要超过500MB
              </div>
            </template>
          </el-upload>
        </el-col>
        <el-col
          :span="4"
          :offset="1"
        >
          <el-button
            icon="Collection"
            size="large"
            type="primary"
            @click="approval"
          >项目立项</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { Document } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import sign from '@/assets/sign.png'
import { createProject } from '@/api/project'
import moment from 'moment/moment'
import { useRouter } from 'vue-router'
import { getAllUsers } from '@/api/user'
const router = useRouter()

defineOptions({
  name: 'ProjectApproval'
})
// 项目用户列表
const userList = reactive([])
const secondUser = ref('')
onMounted(() => {
  getAllUsers().then(res => {
    if (res.code === 0) {
      userList.push(...res.data)
    }
  })
})
const clearPeopleSelect = () => {
  condition.secondPrincipal = 0
  secondUser.value = ''
}
const changeSecond = (val) => {
  condition.secondPrincipal = val
  userList.forEach(item => {
    if (item.ID === val) {
      secondUser.value = item.nickName
    }
  })
}
// 数据
const condition = reactive({
  code: '', // 项目编号
  name: '', // 项目名称
  address: '', // 项目地址
  firstPrincipal: '', // 甲方负责人
  firstPhone: '', // 甲方电话
  projectPrice: 0, // 合同金额
  secondPrincipal: 0, // 乙方负责人
  signTime: '', // 合同签订日期
  intoConstructionTime: '', // 进场施工时间
  completedTime: '', // 竣工时间
  supervisorUint: '', // 监理单位
  supervisorName: '', // 监理姓名
  supervisorPhone: '', // 监理电话
  illustrate: '', // 说明
  state: 1 // 状态
})
// 基本信息页数
const infoSteps = ref(0)
const previousPage = () => {
  infoSteps.value -= 1
}
const nextPage = () => {
  // if (infoSteps.value === 0) {
  //   const home = {
  //     name: condition.name,
  //     address: condition.address,
  //     firstPrincipal: condition.firstPrincipal,
  //     firstPhone: condition.firstPhone
  //   }
  //   for (const item in home) {
  //     if (home[item] === '') {
  //       ElMessage.error('请将甲方信息填写完整')
  //       return
  //     }
  //   }
  //   infoSteps.value += 1
  // } else if (infoSteps.value === 1) {
  //   const second = {
  //     projectPrice: condition.projectPrice,
  //     secondPrincipal: condition.secondPrincipal,
  //     signTime: condition.signTime,
  //     intoConstructionTime: condition.intoConstructionTime,
  //     completedTime: condition.completedTime,
  //     illustrate: condition.illustrate
  //   }
  //   for (const item in second) {
  //     if (second[item] === '' || second[item] === 0) {
  //       ElMessage.error('请将乙方信息填写完整')
  //       return
  //     }
  //   }
  // }
  infoSteps.value += 1
}

// 附属文件
const fileListData = ref([])

const changeFileData = (file, fileList) => {
  fileListData.value = fileList
}

const removeFileData = (file, fileList) => {
  fileListData.value = fileList
}

// 项目立项
const approval = () => {
  const basic = condition
  basic.code = 'LCZH' + createCode()
  const formData = new FormData()
  const json = JSON.stringify(basic)
  if (fileListData.value.length !== 0) {
    fileListData.value.forEach(item => {
      formData.append('file', item.raw)
    })
  } else {
    formData.append('file', [])
  }
  formData.append('project', json)
  createProject(formData).then(res => {
    if (res.code === 0) {
      ElMessage({
        message: '立项成功',
        type: 'success',
      })
      const { href } = router.resolve({
        path: '/layout/projectManage/projectList', // 路径
      })
      location.href = (href)
    } else {
      ElMessage({
        message: res.msg,
        type: 'error',
      })
    }
  })
}

const createCode = () => {
  return moment().format('YYYYMMDDHHmm')
}
</script>

<style scoped lang="less">
.basicInformation{
  height: 40px;
  background-color: #f8fafd;
  display: flex;
  //align-items: center;
}
</style>
