<template>
  <view class="day-plan">
    <u-navbar
      class="u-navbar"
      :title="dayPlanTitle"
      placeholder
      @leftClick="leftClick"
      leftIconColor="#fff"
      bgColor="#00337A"
      :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"
    />
    <view class="day-plan-content">
      <button
        :key="index"
        @tap="onTapCheck(index)"
        v-for="(item, index) in btnList"
        :class="{ active: index === activeIndex }"
      >
        {{ item.btn_title }}
      </button>
    </view>

    <!-- 工程待办 -->
    <view class="common-style" v-show="activeIndex === 0">
      <picker mode="date" @change="onDateChange" :value="currentTime">
        <view>
          <text style="color: red; margin: 0 10rpx">*</text>
          <text>选择时间</text>
        </view>

        <view class="time-container">
          <view class="date-picker">{{ currentTime }}</view>
          <text>&gt;</text>
        </view>
      </picker>
    </view>
    <!-- 发起提交 -->
    <view v-show="activeIndex === 1" class="submit-container common-style">
      <uni-forms
        class="form-container"
        ref="form"
        :modelValue="formData"
        :rules="rules"
        label-position="top"
        label-width="200"
      >
        <uni-forms-item label="工程名称" required>
          <view class="time-container" @tap="onSelectProject">
            <view>请选择</view>
            <text>&gt;</text>
          </view>
        </uni-forms-item>
        <uni-forms-item label="选择时间" required>
          <view>
            <TimeSelect />
          </view>
        </uni-forms-item>

        <uni-forms-item
          v-for="(item, index) in dayPlanTitle === '基建周计划' ? infrastructureFormLabel : productionFormLabel"
          :key="index"
          :label="item.form_label"
          name="name"
          required
        >
          <uni-easyinput v-if="item.items_type === 'ipt'" type="text" v-model="formData.name" placeholder="请填写" />
          <uni-data-select
            v-model="formData.nr"
            :localdata="item.options"
            v-if="item.items_type === 'sel'"
          ></uni-data-select>
        </uni-forms-item>
      </uni-forms>

      <view class="submit-btn">
        <button>导入计划</button>
        <button @tap="onSaveSubmit">保存提交</button>
      </view>
    </view>
    <!-- 查看报表 -->
    <view v-show="activeIndex === 2" class="common-style">
      <uni-forms ref="form-b" label-position="top" label-width="200">
        <uni-forms-item label="工程名称" required>
          <view class="time-container" @tap="onSelectProject">
            <view>请选择</view>
            <text>&gt;</text>
          </view>
        </uni-forms-item>
      </uni-forms>

      <view class="icon-search-time">
        <text style="fon-size: 30rpx; margin-right: 25rpx" @tap="onReduceMonth">《</text>
        <uni-icons type="left" size="20" @tap="onReduceDay"></uni-icons>

        <view class="view-time">
          <picker mode="date" @change="onChangeCurrentData" :value="currentTime">
            <view class="date-picker">{{ currentTime }}</view>
          </picker>
        </view>

        <uni-icons type="right" size="20" @tap="onAddDay"></uni-icons>
        <text style="fon-size: 30rpx; margin-left: 25rpx" @tap="onAddMonth">》</text>

        <button @tap="onBackToday">返回本日</button>
      </view>
    </view>
    <!-- 查看数据 -->
    <view v-show="activeIndex === 3" class="common-style">
      <uni-search-bar
        bgColor="#efefef"
        textColor="#000"
        placeholder="搜索"
        clearButton="none"
        cancelButton="none"
        @confirm="search"
      />

      <uni-forms ref="form-b" label-position="top" label-width="200">
        <uni-forms-item label="工程名称" required>
          <view class="time-container" @tap="onViewSelectProject">
            <view>请选择</view>
            <text>&gt;</text>
          </view>
        </uni-forms-item>
        <uni-forms-item label="全部状态" required>
          <view class="time-container" @tap="onSelectAllType">
            <view>请选择</view>
            <text>&gt;</text>
          </view>
        </uni-forms-item>
      </uni-forms>
    </view>

    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-content" v-if="popupType === 'center'">
        <view class="flex-style" style="justify-content: space-between">
          <text>选择工程</text>
          <text>X</text>
        </view>
        <view>2024-10-16</view>
        <view class="search">
          <view class="select">
            <uni-data-select v-model="value" @change="onProjectChange" :localdata="range"></uni-data-select>
          </view>
          <button>搜索</button>
        </view>
        <view class="project-content">暂无数据</view>
      </view>

      <view v-else class="popup-bottom-content">
        <view class="bottom-title">
          <text>请选择</text>
          <text>请选择</text>
          <uni-icons type="closeempty" size="20" @tap="onClosePopup"></uni-icons>
        </view>

        <view v-if="isType">
          <view class="select-item" v-for="item in isAUditingList" :key="item.title" @tap="onCheckAuditing(item.value)">
            {{ item.title }}
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import TimeSelect from './components/time-select'
export default {
  components: {
    TimeSelect
  },
  data() {
    return {
      dayPlanTitle: '基建日计划',
      activeIndex: 0,
      btnList: [
        { btn_title: '工作待办' },
        { btn_title: '发起提交' },
        { btn_title: '查看报表' },
        { btn_title: '查看数据' }
      ],
      currentTime: this.$moment().format('YYYY-MM-DD'),
      range: [
        { value: 0, text: '全部' },
        { value: 1, text: '未填报' },
        { value: 2, text: '已填报' }
      ],
      value: 0,
      formData: {},
      rules: {
        name: {
          rules: [{ required: true, errorMessage: '请填写' }]
        },
        gk: {
          rules: [{ required: true, errorMessage: '请填写' }]
        },
        jd: {
          rules: [{ required: true, errorMessage: '请填写' }]
        },
        nr: {
          rules: [{ required: true, errorMessage: '请填写' }]
        },
        dj: {
          rules: [{ required: true, errorMessage: '请填写' }]
        }
      },
      popupType: 'center',
      isType: false,
      isAUditingList: [
        { title: '未审核', value: 0 },
        { title: '已审核', value: 1 }
      ],
      riskLevel: [
        { value: 0, text: '可接受风险' },
        { value: 1, text: '低风险' },
        { value: 2, text: '中风险' },
        { value: 2, text: '高风险' },
        { value: 2, text: '特高风险' }
      ],

      infrastructureFormLabel: [
        { form_label: '作业内容', items_type: 'ipt' },
        { form_label: '作业条件（人员、机具、图纸、物资等、气候条件对作业的影响）', items_type: 'ipt' },
        { form_label: '风险类别', items_type: 'ipt' },
        { form_label: '管控措施', items_type: 'ipt' },
        {
          form_label: '风险等级',
          items_type: 'sel',
          options: [
            { value: 0, text: '可接受风险' },
            { value: 1, text: '低风险' },
            { value: 2, text: '中风险' },
            { value: 2, text: '高风险' },
            { value: 2, text: '特高风险' }
          ]
        },
        {
          form_label: '管控级别',
          items_type: 'sel',
          options: [
            { value: 0, text: '项目部' },
            { value: 1, text: '分公司' },
            { value: 2, text: '公司职能部门' },
            { value: 2, text: '公司领导' },
            { value: 2, text: '运检站' },
            { value: 2, text: '各单位级' }
          ]
        },
        {
          form_label: '是否有危大/易造成人员较大伤亡作业',
          items_type: 'sel',
          options: [
            { value: 0, text: '是' },
            { value: 1, text: '否' }
          ]
        },
        {
          form_label: '方案是否报审',
          items_type: 'sel',
          options: [
            { value: 0, text: '是' },
            { value: 1, text: '否' }
          ]
        },
        {
          form_label: '是否有涉网作业',
          items_type: 'sel',
          options: [
            { value: 0, text: '是' },
            { value: 1, text: '否' }
          ]
        },
        {
          form_label: '线路/设备停电计划是否上报',
          items_type: 'sel',
          options: [
            { value: 0, text: '是' },
            { value: 1, text: '否' }
          ]
        },
        { form_label: '项目负责人/联系电话', items_type: 'ipt' },
        { form_label: '单位负责人/联系电话', items_type: 'ipt' },
        { form_label: '计划数量', items_type: 'ipt' }
      ],
      productionFormLabel: [
        { form_label: '作业内容', items_type: 'ipt' },
        { form_label: '实施单位', items_type: 'ipt' },
        { form_label: '实施部门', items_type: 'ipt' },
        { form_label: '任务来源', items_type: 'ipt' },
        {
          form_label: '作业类型',
          items_type: 'sel',
          options: [
            { value: 0, text: '检修' },
            { value: 1, text: '维护' }
          ]
        },
        { form_label: '计划开始时间', items_type: 'sel' },
        { form_label: '计划结束时间', items_type: 'sel' },
        {
          form_label: '是否停电',
          items_type: 'sel',
          options: [
            { value: 0, text: '是' },
            { value: 1, text: '否' }
          ]
        },
        { form_label: '停电设备（作业场所）', items_type: 'ipt' },
        { form_label: '作业监督人/联系电话', items_type: 'ipt' },
        { form_label: '作业负责人/联系电话', items_type: 'ipt' },
        {
          form_label: '管控级别',
          items_type: 'sel',
          options: [
            { value: 0, text: '项目部' },
            { value: 1, text: '分公司' },
            { value: 2, text: '公司职能部门' },
            { value: 2, text: '公司领导' },
            { value: 2, text: '运检站' },
            { value: 2, text: '各单位级' }
          ]
        },
        {
          form_label: '风险等级',
          items_type: 'sel',
          options: [
            { value: 0, text: '可接受风险' },
            { value: 1, text: '低风险' },
            { value: 2, text: '中风险' },
            { value: 2, text: '高风险' },
            { value: 2, text: '特高风险' }
          ]
        },
        {
          form_label: '管控方式（根据作业内容在作业文件栏中选择"是"、"否"）',
          items_type: 'sel',
          options: [
            { value: 0, text: '过程管控' },
            { value: 1, text: '巡视管控' },
            { value: 2, text: '驻点管控' },
            { value: 2, text: '节点管控' }
          ]
        },
        {
          form_label: '施工方案',
          items_type: 'sel',
          options: [
            { value: 0, text: '是' },
            { value: 1, text: '否' }
          ]
        },
        {
          form_label: '作业指导书',
          items_type: 'sel',
          options: [
            { value: 0, text: '是' },
            { value: 1, text: '否' }
          ]
        },
        {
          form_label: '作业表单',
          items_type: 'sel',
          options: [
            { value: 0, text: '是' },
            { value: 1, text: '否' }
          ]
        },
        {
          form_label: '工作票',
          items_type: 'sel',
          options: [
            { value: 0, text: '是' },
            { value: 1, text: '否' }
          ]
        },
        { form_label: '备注', items_type: 'ipt' },
        { form_label: '计划数量', items_type: 'ipt' }
      ]
    }
  },
  methods: {
    leftClick() {
      uni.navigateTo({ url: '/pages/workPlan/workbench/index' })
    },
    onTapCheck(i) {
      this.activeIndex = i
    },
    onSelectTime() {
      this.$refs.popup.open('top')
    },
    onChangeCurrentData(e) {
      this.currentTime = e.detail.value
    },
    onSelectProject() {
      this.$refs.popup.open('center')
      this.popupType = 'center'
    },
    onProjectChange() {
      console.log('选择---')
    },
    onSaveSubmit() {
      this.$refs.form
        .validate()
        .then(res => {
          console.log(res)
        })
        .catch(error => {
          console.log(error)
        })
    },
    onReduceMonth() {
      this.currentTime = this.$moment(this.currentTime).subtract(1, 'months').format('YYYY-MM-DD')
    },
    onReduceDay() {
      this.currentTime = this.$moment(this.currentTime).subtract(1, 'days').format('YYYY-MM-DD')
    },
    onAddMonth() {
      this.currentTime = this.$moment(this.currentTime).add(1, 'months').format('YYYY-MM-DD')
    },
    onAddDay() {
      this.currentTime = this.$moment(this.currentTime).add(1, 'days').format('YYYY-MM-DD')
    },
    onBackToday() {
      this.currentTime = this.$moment().format('YYYY-MM-DD')
    },
    onViewSelectProject() {
      this.$refs.popup.open('bottom')
      this.popupType = 'bottom'
    },
    onSelectAllType() {
      this.$refs.popup.open('bottom')
      this.popupType = 'bottom'
      this.isType = true
    },
    onClosePopup() {
      this.$refs.popup.close()
      if (this.isType) {
        this.isType = !this.isType
      }
    },
    onCheckAuditing(val) {
      console.log(val, '----')
    }
  },
  onLoad(options) {
    if (options.type == 1) {
      this.dayPlanTitle = '基建周计划'
    } else {
      this.dayPlanTitle = '生产周计划'
    }
  }
}
</script>

<style lang="scss" scoped>
.day-plan-content {
  display: flex;
  button {
    // width: 50%;
    flex: 1;
    height: 120rpx;
    // color: #00337a;
    color: #2c2b2b;
    font-size: 26rpx;
    line-height: 120rpx;
    text-align: center;
    border-radius: 0;
  }

  button::after {
    border: none;
  }

  .active {
    border-bottom: 2px solid #00337a;
  }
}

.common-style {
  padding: 15rpx;
}

.time-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx 38rpx;
}

// .project-select {
//   width: 80%;
// }

.popup-content {
  width: 90vw;
  padding: 20rpx;
  background-color: #eeeeee;

  .search {
    width: 100%;
    height: 70rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #eeeeee;
    .select {
      height: 68rpx;
      width: 65%;
      margin: 0;
    }

    button {
      height: 68rpx;
      width: 30%;
      line-height: 68rpx;
      font-size: 32rpx;
      background-color: #003777;
      color: #fff;
      border-radius: 12rpx;
    }
  }

  .project-content {
    height: 460rpx;
    width: 97%;
    margin: 0 auto;
    background-color: #fff;
  }
}
.flex-style {
  display: flex;
  align-content: center;
}

.form-container {
  padding: 10rpx 20rpx;
}

.uni-forms-item {
  margin-bottom: 16px;
}

.submit-btn {
  margin: 15rpx 0;
}

.icon-search-time {
  height: 68rpx;
  display: flex;
  align-items: center;
  font-weight: bold;

  button {
    background-color: #003777;
    color: #fff;
    height: 65rpx;
    line-height: 65rpx;
    font-weight: normal;
    font-size: 30rpx;
  }
}

.view-time {
  margin: 0 35rpx;
}
.popup-bottom-content {
  height: 50vh;

  .bottom-title {
    height: 90rpx;
    padding-right: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
  }
  .bottom-title text:first-child {
    color: transparent;
  }

  .select-item {
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    border-bottom: 1px solid #ccc;
  }
  .select-item:hover {
    background-color: rgb(224, 239, 249);
  }
}
</style>
