<template>
  <div>
      <!-- 导航返回上一页 -->
          <van-nav-bar
          title="发起申请"
          left-arrow
          @click-left="onClickLeft"
          />
      <!-- 申请发票需要输入的数据 -->
      <div class="bg-white pb-3">
        <div class="text-gray-500 px-4 py-3 font-semibold">发票信息</div>
        <!-- 是否上传票据 -->
        <div v-show="isInvoice">
            <div class="mx-4 pb-3 border-b">
              <div class="flex pt-3 pb-2 justify-between" v-show="titleHidden">
                <div>
                  <span class="text-red-500">*</span>
                  <span class="text-gray-500">上传票据凭证 </span>
                  <span class="text-gray-400 text-xs">(仅支持ipg格式)</span>
                </div>
                <van-button plain type="primary" size="mini" @click="isInvoice = false">手动输入</van-button>
              </div>
              <div class="text-center border-b w-52 h-24 bg-gray-100 border-dashed border-2" @click="uploadBill" v-show="!isSuccess">
                <p class="text-gray-400 text-xl pt-3">+</p>
                <p class="text-gray-400 text-xs">上传并识别凭证</p>
              </div>
              <!-- 上传票据成功后显示发票信息 -->
              <div v-show="isSuccess">
                  <van-field
                      v-for="item in billList"
                      required
                      v-model="item.values"
                      :label=item.name
                      input-align="right"
                  />
                </div>
            </div>
        </div >
          <!-- 手动输入信息 -->
        <div v-show="!isInvoice">
                <van-field
                  required
                  v-model="applyMoney"
                  label="申请金额"
                  placeholder="输入申请金额"
                  input-align="right"
                />
        </div>
        <!-- 备注信息 -->
        <div class="text-gray-500 py-4 pl-5">备注</div>
          <van-cell-group>
              <van-field
                v-model="message"
                rows="2"
                autosize
                type="textarea"
                maxlength="40"
                placeholder="请输入备注"
                show-word-limit
                class="border rounded"
              />
          </van-cell-group>
      </div>
      <!-- 选择审核人 -->
      <div class="mt-3">
           <div class="flex bg-white p-4">
              <div class="text-red-500">*</div>
              <div class="text-gray-500 pl-1 font-semibold">审核人</div>
           </div>
          <div class="px-3 bg-white">
            <div>
              <van-button
                class="button"
                size="mini"
                v-for="item in reviewerList"
                :type="selected.find(checker => checker === item) ? 'primary' : 'default'"
                @click="handleSelectChecker(item)"
              >
                {{item}}
              </van-button>
            </div>
          </div>
      </div>
      <!-- 其他信息 -->
      <div class="bg-white mt-3">
        <div class="text-gray-500 p-4 font-semibold">其他信息</div>
        <!-- 申请类型 -->
        <!-- 普通票据申请 -->
        <div v-show="isInvoice">
            <van-field
              v-model="applyType"
              is-link
              readonly
              label="申请类型"
              placeholder="请选择申请类型"
              @click="showType = true"
              required
              input-align="right"
            />
            <van-popup v-model:show="showType" round position="bottom">
              <van-cascader
                :options="applyTypeOptions"
                @close="showType = false"
                @finish="finishApplyType"
                active-color="#1989fa"
                class="p-0"
              />
            </van-popup>
            <!-- 所属项目 -->
            <van-field
              v-model="applyProject"
              is-link
              readonly
              label="所属项目"
              placeholder="请选择所属项目"
              @click="showProject = true"
              required
              input-align="right"
            />
            <van-popup v-model:show="showProject" round position="bottom">
              <van-cascader
                :options="applyProjectOptions"
                @close="showProject = false"
                @finish="finishApplyProject"
                active-color="#1989fa"
                class="p-0"
              />
            </van-popup>
            <!-- 所属任务的 -->
            <van-field
              v-model="applyTask"
              is-link
              readonly
              label="所属任务"
              placeholder="请选择所属任务"
              @click="showTask = true"
              required
              input-align="right"
            />
            <van-popup v-model:show="showTask" round position="bottom">
              <van-cascader
                :options="applyTaskOptions"
                @close="showTask = false"
                @finish="finishApplyTask"
                active-color="#1989fa"
                class="p-0"
              />
            </van-popup>
            <!-- 类目选择 -->
            <van-field
                v-model="applyCategory"
                is-link
                readonly
                label="类目"
                placeholder="请选择类目"
                @click="showCategory = true"
                required
                input-align="right"
              />
            <van-popup v-model:show="showCategory" round position="bottom">
              <van-cascader
                :options="applyCategoryOptions"
                @close="showCategory = false"
                @finish="finishApplyCategory"
                active-color="#1989fa"
                class="p-0"
              />
            </van-popup>
            <!-- 名目选择 -->
            <van-field
                v-model="applyName"
                is-link
                readonly
                label="类目"
                placeholder="请选择类目"
                @click="showName = true"
                required
                input-align="right"
              />
            <van-popup v-model:show="showName" round position="bottom">
              <van-cascader
                :options="applyNameOptions"
                @close="showName = false"
                @finish="finishApplyName"
                active-color="#1989fa"
                class="p-0"
              />
            </van-popup>
        </div>
        <!-- 个人手动申请 -->
        <div v-show="!isInvoice">
        <div class="pl-2">
          <van-cell title="单元格" is-link :value="personalType" required/>
          <van-cell title="单元格" is-link :value="personalCategory" required/>
        </div>

        </div>
      </div>
      <!-- 提交人信息 -->
      <div class="bg-white mt-3">
           <div class="text-gray-500 p-4 font-semibold">提交人信息</div>
           <van-field
              required
              v-model="name"
              label="姓名"
              placeholder="输入姓名"
              input-align="right"
            />
         <!-- 选择所属部门 -->
          <van-field
            v-model="applyDepartment"
            is-link
            readonly
            label="所属部门"
            placeholder="请选择所属部门"
            @click="showDepartment = true"
            required
            input-align="right"
          />
        <van-popup v-model:show="showDepartment" round position="bottom">
          <van-cascader
            :options="applyDepartmentOptions"
            @close="showDepartment = false"
            @finish="finishApplyDepartment"
            active-color="#1989fa"
            class="p-0"
          />
        </van-popup>
      </div>
      <!-- 历史申请 -->
      <div class="bg-white mt-3 p-4">
            <div class="text-gray-500 font-semibold">历史申请</div>
            <div v-if="showHistory">
              <Search />
              <FinanceExamine />
            </div>
            <div v-if="!showHistory" class="no-data">
                暂无历史记录
            </div>
      </div>
      <!-- 底部立即提交按钮 -->
         <div class="mx-6 mt-10">
          <van-button type="primary" size="small" block>立即提交</van-button>
        </div>
  </div>
</template>
<script setup>
import {ref} from 'vue'
const isInvoice = ref(true); // 判断是否是手动输入
const message = ref('');   // 备注的值
const billList = ref([
  {
    name: '发票代码',
    values:0
  },
  {
    name: '发票号码',
    values:1
  },
  {
    name: '合计金额(元)',
    values:2
  },
  {
    name: '税额(元)',
    values:3
  },
  {
    name: '开票日期',
    values:4
  }
]) // 识别后的发票信息
const reviewerList = ref(['冯教授','周亮','李洪明','夏红','麦琪其','薇薇安','卫老师']);  //审核人数组
const selected = ref(['冯教授']); //默认的审核人
const showHistory = ref(true); // 根据数据判断是否有历史记录
const applyData = ref([
  {
    applicant:'代用名1',
    money:100,
    time:'2021/12/31 12:31',
    type: 1
  },
  {
    applicant:'代用名2',
    money:100,
    time:'2021/12/31 12:31',
    type: 2
  },
  {
    applicant:'代用名1',
    money:100,
    time:'2021/12/31 12:31',
    type: 3
  },
  {
    applicant:'代用名2',
    money:100,
    time:'2021/12/31 12:31',
    type: 3
  },
  {
    applicant:'代用名1',
    money:100,
    time:'2021/12/31 12:31',
    type: 1
  },
  {
    applicant:'代用名2',
    money:100,
    time:'2021/12/31 12:31',
    type: 2
  }
]);  //  申请的记录
const isSuccess = ref(false)  // 上传票据是否成功
const name = ref('')  // 提交人的姓名
const applyMoney = ref(5000) // 手动输入时输入的申请的金额
const titleHidden = ref(true) // 上传提示语隐藏
const currentPage = ref(0) //当前显示页数
const personalType = ref('个人申请')
const personalCategory = ref('用款')

// 其他信息的多个选择按钮
  // 申请类型的
  const showType = ref(false);
  const applyProject = ref('');  // 选择的类型的值
  const applyTypeOptions = [
      {
        text: '项目申请',
        value: '330000',
      },
      {
        text: '日常申请',
        value: '320000',
      }
    ];
    function finishApplyType({ selectedOptions }){
      showType.value = false;
      applyType.value = selectedOptions.map((option) => option.text);
    }
  // 所属项目的
  const showProject = ref(false);
  const applyType = ref('');  // 选择的项目的值
  const applyProjectOptions = [
      {
        text: '项目一',
        value: '330000',
      },
      {
        text: '项目二',
        value: '320000',
      },
      {
        text: '项目三',
        value: '310000',
      }
    ];
    function finishApplyProject({ selectedOptions }){
      showProject.value = false;
      applyProject.value = selectedOptions.map((option) => option.text);
    }

  // 所属任务的
  const showTask = ref(false);
  const applyTask = ref('');  // 选择的任务的值
  const applyTaskOptions = [
      {
        text: '任务一',
        value: '330000',
      },
      {
        text: '任务二',
        value: '320000',
      },
      {
        text: '任务三',
        value: '310000',
      }
    ];
    function finishApplyTask({ selectedOptions }){
      showTask.value = false;
      applyTask.value = selectedOptions.map((option) => option.text);
    }
  // 所属的类目
  const showCategory = ref(false);
  const applyCategory = ref('');  // 选择的类目的值
  const applyCategoryOptions = [
      {
        text: '报销',
        value: '330000',
      },
      {
        text: '奖金',
        value: '320000',
      },
    ];
    function finishApplyCategory({ selectedOptions }){
      showCategory.value = false;
      applyCategory.value = selectedOptions.map((option) => option.text);
    }

  // 所属的名目
  const showName = ref(false);
  const applyName = ref('');  // 选择的名目的值
  const applyNameOptions = [
      {
        text: '办公费',
        value: '330000',
      },
      {
        text: '车辆费用',
        value: '320000',
      },
      {
        text: '差旅费',
        value: '310000',
      }
    ];
    function finishApplyName({ selectedOptions }){
      showName.value = false;
      applyName.value = selectedOptions.map((option) => option.text);
    }

  // 所属部门
  const showDepartment = ref(false);
  const applyDepartment = ref('');  // 选择的部门的值
  const applyDepartmentOptions = [
      {
        text: '软件部',
        value: '330000',
      },
      {
        text: '硬件部',
        value: '320000',
      },
      {
        text: '人事部',
        value: '310000',
      }
    ];
    function finishApplyDepartment({ selectedOptions }){
      showDepartment.value = false;
      applyDepartment.value = selectedOptions.map((option) => option.text);
    }


// 检查被选中的审核人的状态
function handleSelectChecker(items){
  const target = selected.value.find(item =>item === items)
  if(target){
    selected.value = selected.value.filter(item =>item !== items)
  }else{
    selected.value.push(items)
  }
}
// 上传票据事件
function uploadBill(){
  //TODO:调取接口识别票据
  setTimeout(() =>{
    titleHidden.value = false
    isSuccess.value = true
  },1000)
}

function onClickLeft(){
  console.log(1)
}

</script>

<style lang="less" scoped>
.van-cell-group{
  padding:0 1rem;
}
.van-cell{
  font-size: 15px;
}
.bill-name{
  font-weight: 600;
  color: #6F6F6F;
  border-bottom: 1px solid #eee;
  padding: 0.75rem 0px;
}
.van-button{
  border-radius: 0.2rem;
}
.button{
  border-radius: 1rem;
  padding: 0 0.75rem;
  margin: 0.5rem ;
}
</style>
