<template>
  <view>
    <view class="tui-page__bd">
      <tui-form ref="form">
        <tui-form-item label="标题:"
                       asterisk
                       prop="title">
          <tui-input placeholder="请输入标题"
                     v-model="formData.title"></tui-input>
        </tui-form-item>
        <tui-form-item label="发起人:"
                       asterisk
                       prop="create_user_name">
          <tui-input :lineLeft="false"
                     placeholder="发起人"
                     disabled
                     v-model="userinfo.nickname"></tui-input>
        </tui-form-item>
        <tui-form-item asterisk
                       prop="start_time"
                       label="开始时间:"
                       disabled>
          <view @click="showShow()"
                style="z-index:9999999">
            <tui-input placeholder="请输入结束时间"
                       v-model="formData.start_time"></tui-input>
          </view>
        </tui-form-item>
        <tui-form-item asterisk
                       prop="end_time"
                       disabled
                       label="结束时间:">
          <view @click="showShow('end_time')"
                style="z-index:9999999">
            <tui-input placeholder="请输入结束时间"
                       v-model="formData.end_time"></tui-input>
          </view>
        </tui-form-item>
        <!-- 涉及人员 -->

        <tui-form-item :bottom-border="false"
                       asterisk
                       label="人员列表:"
                       prop="task_value"
                       :position="1"
                       @click="setPersonOrgetAllUser">
          <span v-for="[key,value] in personSelecteList"
                :key="key"
                style="margin-right: 15rpx;">
            {{ value.nickname }}
          </span>
        </tui-form-item>
        <tui-form-item :bottom-border="false"
                       asterisk
                       label="详细内容:"
                       prop="task_value"
                       :position="1">
          <template v-slot:row>
            <tui-textarea padding="0 30rpx 30rpx"
                          :border-top="false"
                          placeholder="请输入详细内容"
                          v-model="formData.task_value"></tui-textarea>
          </template>
        </tui-form-item>
      </tui-form>
    </view>
    <view class="btn__box"
          style="z-index: 99999;">
      <tui-button width="400rpx"
                  height="84rpx"
                  bold
                  @click="submitRisk">提交</tui-button>
    </view>
    <view v-show="end_time"
          style="z-index: 99999;">
      <tui-datetime ref="end_time"
                    :type="7"
                    @confirm="endDateTimeChange">
      </tui-datetime>
    </view>
    <view v-show="start_time"
          style="z-index: 99999;">
      <tui-datetime ref="start_time"
                    :type="7"
                    @confirm="startDateTimeChange">
      </tui-datetime>
    </view>
    <!-- 人员多选 -->
    <tui-bottom-popup :zIndex="1002"
                      :maskZIndex="1001"
                      :show="personShow"
                      @close="hiddenPerson">
      <view class="person-tit">责任人列表</view>
      <view class="person-close"
            @click="hiddenPerson"><tui-icon name="close"
                  :size="26"></tui-icon></view>
      <view class="person-list">
        <view class="person-list-box">
          <tui-searchbar radius="40rpx"
                         height="60rpx"
                         placeholder="搜索"
                         @search="usearch"></tui-searchbar>
          <tui-table>
            <tui-tr>
              <tui-td bold
                      v-for="(item,index) in header"
                      :key="index"
                      :span="8">
                <view style="margin: 0 auto;">
                  {{item.title}}
                </view>

              </tui-td>
            </tui-tr>
            <tui-tr v-for="(item, index) in personList"
                    :key="index">
              <tui-td :span="8"
                      style="font-size:26rpx;">
                <view style="margin: 0 auto;">
                  {{item.nickname}}
                </view>
              </tui-td>
              <tui-td :span="8"
                      style="font-size:26rpx;">
                <view style="margin: 0 auto;">
                  {{item.mobile}}
                </view>
              </tui-td>
              <tui-td :span="8">
                <view style="margin: 0 auto;">

                  <tui-checkbox :checked="isChecked(item.id)"
                                @change="changePerson"
                                :value="index.toString()"
                                color="rgb(235, 9, 9)"
                                borderColor="#999">
                  </tui-checkbox>
                </view>
              </tui-td>
            </tui-tr>
          </tui-table>
          <tui-pagination :total="utotal"
                          :current="searchPerson.page"
                          @change="changePage"></tui-pagination>
        </view>
      </view>
    </tui-bottom-popup>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      //表单数据
      formData: {
        title: "", //专项巡查标题
        start_time: null, //开始时间
        end_time: null, //结束时间
        task_value: "", //巡查任务内容
        create_user_id: "", //创建人id
        create_user_name: "", //创建人姓名  即 发起人
        persons: null,
      },
      rules: [],
      start_time: false,
      end_time: false,
      personList: [],
      personSelecteList: new Map(),
      personShow: false,
      searchPerson: {
        nickname: "",
        name: "",
        limit: 10,
        page: 1,
      },
      header: [
        { title: "姓名", key: "nickname" },
        { title: "电话", key: "mobile" },
        { title: "选择", key: "checked" },
      ],
      utotal: 0,
    };
  },
  created() {
    this.personSelecteList.set(
      this.userinfo.userInfo.nickname,
      this.userinfo.userInfo
    );
  },
  mounted() {
    this.$nextTick(() => {
      this.formData.create_user_id = this.userinfo.userId;
      this.formData.create_user_name = this.userinfo.userInfo.nickname;
    });
  },
  computed: {
    ...mapState(["userinfo"]),
  },
  methods: {
    async setPersonOrgetAllUser() {
      let res = await this.$request.get("risk/DistributionProblem/getAllUser", {
        params: this.searchPerson,
      });
      if (res.code == 0) {
        this.personList = res.data.data;
        this.utotal = res.data.total;
        this.personShow = true;
      }
    },
    changePerson(e) {
      if (e.checked)
        this.personSelecteList.set(
          this.personList[e.value].nickname,
          this.personList[e.value]
        );
      else this.personSelecteList.delete(this.personList[e.value].nickname);
    },
    changePage(e) {
      this.searchPerson.page = e.current;
      this.setPersonOrgetAllUser();
    },
    usearch(e) {
      this.searchPerson.nickname = e.value;
      this.setPersonOrgetAllUser();
    },
    hiddenPerson() {
      this.personShow = false;
    },
    isChecked(id) {
      return Array.from(this.personSelecteList.values()).some((e) => {
        return e.id === id;
      });
    },
    showShow: function (ref = "start_time") {
      this.$refs[ref] && this.$refs[ref].show();
      this[ref] = true;
    },
    startDateTimeChange(e) {
      this.dateTimeChange(e, "start_time");
    },
    endDateTimeChange(e) {
      this.dateTimeChange(e, "end_time");
    },
    dateTimeChange(e, ref) {
      if (ref == "start_time") this.formData.start_time = e.result;
      else this.formData.end_time = e.result;
      this[ref] = false;
    },
    async submitRisk() {
      uni.showLoading({
        title: "提交中...",
      });
      this.formData.persons = Array.from(this.personSelecteList.values()).map(
        (item) => {
          return item.id;
        }
      );
      const res = await this.$request.post(
        "patrol/problem/storePatrolMasterstrokeTask",
        {
          body: this.formData,
        }
      );
      uni.hideLoading();
      if (res.code == 0) {
        uni.showToast({
          icon: "success",
          title: "提交成功",
          duration: 2000,
        });
        //重置字段
        this.formData.title = "";
        this.formData.start_time = "";
        this.formData.end_time = "";
        this.formData.task_value = "";
        uni.navigateBack({
          delta: 1,
        });
      } else {
        uni.showToast({
          icon: "error",
          title: res.msg,
          duration: 2000,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.tui-title {
  width: 100%;
  font-size: 28rpx;
  color: #888;
  padding: 30rpx;
  box-sizing: border-box;
}

.btn__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 60rpx 30rpx;
  box-sizing: border-box;
}
.person-tit {
  text-align: center;
  font-size: 30rpx;
  padding: 20rpx 0;
}
.person-close {
  position: absolute;
  right: 10rpx;
  top: 10rpx;
}
.person-list-box {
  padding: 10rpx;
}
.cherbut {
  color: blue;
  font-size: 26rpx;
}
</style>