<template>
  <div>
    <div class="frm">
      <van-field 
        v-model="pushlisher.text" 
        is-link 
        readonly 
        label="活动来源"
        placeholder="请选择活动来源" 
        @click="fieldCLick(0)" 
      />
      
      <van-field 
        v-model="date" 
        is-link 
        readonly 
        label="服务时间" 
        placeholder="请选择日期" 
        @click="fieldCLick(1)" 
      />
      
      <van-field 
        v-model="duration.text" 
        is-link 
        readonly 
        label="服务时长"
        placeholder="请选择时长" 
        @click="fieldCLick(2)" 
      />
      
      <van-field 
        v-model="content" 
        label="服务内容" 
        placeholder="请对服务内容进行简要描述" 
        label-align="top" 
        type="textarea"
        maxlength="100" 
        show-word-limit 
      />
      
      <van-uploader 
        v-model="fileList" 
        multiple 
        max-count="2" 
        :upload-text="uploadTxt" 
        image-fit="cover"
        style="padding: 10px" 
      />
    </div>
    
    <div class="footer">
      <van-button 
        type="primary" 
        color="#ff5d23" 
        block 
        @click="submit"
      >
        提交
      </van-button>
    </div>
    
    <van-popup v-model:show="showPicker" round position="bottom">
      <van-picker 
        :columns="columns" 
        @cancel="pickerCancel"
        @confirm="pickerConfirm" 
      />
    </van-popup>
    
    <van-popup v-model:show="showDatePicker" round position="bottom">
      <van-date-picker 
        v-model="currentDate" 
        title="选择日期" 
        :min-date="minDate" 
        :max-date="maxDate" 
        @cancel="pickerCancel"
        @confirm="pickerConfirm" 
      />
    </van-popup>
  </div>
</template>

<script>
import { showToast, showSuccessToast, showFailToast } from "vant";
import axios from "axios";

function dateRange() {
  const curTimeStamp = new Date();
  const tYear = curTimeStamp.getFullYear();
  const tMonth = curTimeStamp.getMonth();
  const date = curTimeStamp.getDate();
  return {
    currentDate: [tYear, tMonth, date],
    minDate: new Date(tYear - 2, tMonth, date),
    maxDate: new Date(tYear, tMonth, date),
  };
}

let pushlisherList = [];
let durationList = [];

export default {
  data() {
    return {
      columns: [],
      pickerId: null,
      pushlisher: { value: null, text: "" },
      duration: { value: null, text: "" },
      date: null,
      content: "",
      fileList: [],
      currentDate: null,
      minDate: null,
      maxDate: null,
    };
  },
  computed: {
    showPicker() {
      return this.pickerId === 0 || this.pickerId === 2;
    },
    showDatePicker() {
      return this.pickerId === 1;
    },
    uploadTxt() {
      const length = this.fileList.length;
      return "添加照片" + length + "/2";
    },
  },
  methods: {
    fieldCLick(value) {
      this.pickerId = value;
      if (value === 0) {
        this.columns = pushlisherList;
      } else if (value === 2) {
        this.columns = durationList;
      }
    },
    pickerCancel() {
      this.pickerId = null;
    },
    pickerConfirm({ selectedValues, selectedOptions }) {
      const curPickerId = this.pickerId;
      this.pickerId = null;

      if (curPickerId === 1) {
        const data = selectedValues;
        this.date = data.join(".");
        return;
      }

      const data = selectedOptions[0];
      const payload = {
        value: data.value,
        text: data.text,
      };

      if (curPickerId === 0) {
        this.pushlisher = payload;
        return;
      }

      this.duration = payload;
    },
    fetchPublisherlist() {
      axios.get("/api/act/publisherList").then(function (response) {
        const { error, data = {} } = response.data;
        if (error === 0) {
          pushlisherList = data.list || [];
        }
      });
    },
    fetchDurations() {
      axios.get("/api/act/durationsList").then(function (response) {
        const { error, data = {} } = response.data;
        if (error === 0) {
          durationList = data.list || [];
        }
      });
    },
    submit() {
      if (!this.pushlisher.text) {
        showToast("未选择活动来源");
        return;
      }
      if (!this.date) {
        showToast("未选择服务时间");
        return;
      }
      if (!this.duration.text) {
        showToast("未选择服务时长");
        return;
      }
      if (!this.content) {
        showToast("未填写服务内容");
        return;
      }
      if (!this.fileList.length) {
        showToast("未上传服务照片");
        return;
      }

      const payload = {
        pushlisher: this.pushlisher.value,
        date: +new Date(this.date),
        duration: this.duration.value,
        content: this.content,
        fileList: this.fileList,
      };

      axios.post("/api/act/uploadService", payload).then(function (response) {
        const { error, msg } = response.data;
        if (error === 0) {
          showSuccessToast("操作成功");
        } else {
          showFailToast(msg || "网络错误，请稍后重试");
        }
      });
    },
  },
  created() {
    const { currentDate, minDate, maxDate } = dateRange();
    this.currentDate = currentDate;
    this.minDate = minDate;
    this.maxDate = maxDate;
    this.fetchDurations();
    this.fetchPublisherlist();
  },
};
</script>

<style scoped>
.frm {
  background: white;
}

.footer {
  padding: 20px;
}
</style>
