<template>
  <div class="approvalopinion">
    <div class="nobtn">
      <div class="approvalopinion_text">
        <!-- 拒绝时写固定的意见 -->
        <div class="list" v-if="type == 0">
          <div class="textarea_msgfont">
            <span class="msgfont">
              <span class="icon">*</span>
              <span> 审批意见:</span>
            </span>
            <textarea :maxlength="150" placeholder="请输入审批意见" v-model="opinion" class="textarea" clearable="false"> </textarea>
            <div class="clearns" @click="clearn">清空内容</div>
            <div class="msg_length">
              <span class="font">{{ opinion.length }}</span>
              <span>/150</span>
            </div>
          </div>
        </div>

        <!-- 同意意见 -->
        <div v-if="type == 1">
          <div class="list" v-for="(item, index) in list" :key="index">
            <div class="textarea_msgfont" v-if="item.fieldType == 3">
              <span class="msgfont">
                <span class="icon" v-if="item.mustFill == 1">*</span>
                <span> {{ item.fieldName }}:</span>
              </span>
              <textarea :maxlength="150" placeholder="请输入审批意见" v-model="item.fieldValue" class="textarea" clearable="false"> </textarea>
              <div class="clearns" @click="clearn">清空内容</div>
              <div class="msg_length">
                <span class="font">{{ item.fieldValue && item.fieldValue.length }}</span>
                <span>/{{ item.fieldLength }}</span>
              </div>
            </div>

            <!-- 入户调查时间 -->
            <!-- v-if="item.fieldType == 3 && item.fieldDataType == 8" .-->
            <div class="calendar" v-if="item.fieldType == 5">
              <div class="left">
                <span class="icon" v-if="item.mustFill == 1">*</span>
                <span> {{ item.fieldName }}:</span>
              </div>
              <div class="left">
                <u-input type="text" @click="timeSelect(index)" class="right" placeholder="请选择" disabled v-model="item.fieldValue"></u-input>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 附件资料 -->
      <div class="reply_files">
        <text class="img">附件资料</text>
        <text class="img_text">(最多支持9个附件)</text>
        <!-- 单个文件最大10MB.zip、.rar、.doc、.docx、.xls、.xlsx、.ppt、.pptx、.pdf、.txt、.jpg、.png格式 -->
        <div class="upload">
          <div class="info">
            <AiUploader multiple @list="(v) => (annex = v)" :limit="9" action="/admin/file/add2" type="file" placeholder="添加文件" preview />
          </div>
        </div>
      </div>

      <!-- 图片资料 -->
      <div class="reply_img">
        <text class="img">图片资料</text>
        <text class="img_text">(最多9张)</text>
        <div class="uploads">
          <div class="infos">
            <AiUploader multiple @list="(v) => (picture = v)" :limit="9" action="/admin/file/add2" preview />
          </div>
        </div>
      </div>
    </div>

    <div class="btn" @click="btn">确定</div>

    <!-- 日期选择器 -->
    <u-calendar v-model="show" :mode="mode" @change="calendar" />
  </div>
</template>

<script>
export default {
  name: 'Opinion',
  components: {},
  props: {},
  data() {
    return {
      mode: 'date',
      show: false,
      list: [],
      type: '',
      picture: [],
      pass: false,
      annex: [],
      stepList: '',
      filedIndex: 0,
      fileNameList: [],
      opinion: '',
    }
  },
  onLoad(options) {
    this.objid = options.id
    this.type = options.type

    this.getList()
  },
  onShow() {
    document.title = '审批详情'
  },
  computed: {},
  watch: {},
  onShow() {},
  mounted() {},
  methods: {
    getList() {
      this.$http
        .post(`/app/approv-alapply-info/approval-popup?type=${this.type}&id=${this.objid}`)
        .then((res) => {
          if (res.code == 0) {
            res.data.fieldInfos.map((item) => {
              if (item.fieldDataType == 1) {
                item.fieldValue = ''
              }

              if (item.fieldType == 3) {
                this.list.push(item)
              }
            })
          }
        })
        .catch(() => {
          // this.$u.toast(err)
        })
    },

    timeSelect(index) {
      this.filedIndex = index
      this.show = true
    },

    clearn() {
      this.opinion = ''
      this.list.map((item) => {
        if (item.mustFill == 1 && item.fieldValue) {
          item.fieldValue = ''
        }
      })
    },

    btn() {
      if (this.type == 0 && this.opinion == '') {
        return uni.showToast({
          title: '请输入审批意见',
          icon: 'none',
        })
      }

      if (
        this.list.some((item) => {
          if (item.mustFill == 1 && !item.fieldValue) {
            uni.showToast({
              title: item.fieldName + '为必填',
              icon: 'none',
            })
            return true
          }
        })
      )
        return

      var file = []
      this.annex.map((item) => {
        file.push(item.id)
      })

      var img = []
      this.picture.map((item) => {
        img.push(item.id)
      })
      var params = {
        id: this.objid,
        picture: img.join(','),
        pass: this.type == 1,
        annex: file.join(','),
        fieldInfos: this.list,
        opinion: this.opinion,
      }
      uni.showLoading({
        title: '加载中',
      })

      this.$http
        .post(`/app/approv-alapply-info/approval`, params)
        .then((res) => {
          if (res.code == 0) {
            uni.navigateTo({
              url: `./Msg?flag=1`,
            })
            // this.getList()
          }
        })
        .catch((e) => {
          uni.navigateTo({
            url: `./Msg?flag=0`,
          })
          uni.showToast({
            title: e,
            icon: 'none',
          })
          // this.getList()
        })
    },

    data(e) {
      this.files.push(e)
    },

    change(e) {
      this.files = e
    },

    calendar(e) {
      this.list[this.filedIndex].fieldValue = e.result
    },
  },
}
</script>

<style scoped lang="scss">
.approvalopinion {
  height: 100%;

  .nobtn {
    padding: 0 0 112px 0;

    .approvalopinion_text {
      .list {
        .textarea_msgfont {
          position: relative;
          height: 400px;
          padding: 32px;
          background-color: #fff;

          .msgfont {
            font-size: 32px;

            .icon {
              margin-right: 8px;
              color: #ff4466;
            }
          }

          .textarea {
            margin-top: 10px;
          }

          .clearns {
            color: #1365dd;
          }

          .msg_length {
            position: absolute;
            bottom: 42px;
            right: 32px;

            .font {
              color: #999;
            }
          }
        }

        .calendar {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 20px;
          background-color: #fff;
          padding: 0 32px;

          .left {
            .icon {
              color: #ff4466;
              margin-right: 8px;
            }
          }

          .right {
            width: 160px;
          }
        }
      }
    }

    .reply_files {
      margin-top: 20px;
      background-color: #fff;
      padding: 0 20px 0;

      .img {
        display: inline-block;
        margin-top: 20px;
        font-size: 32px;
      }

      .img_text {
        font-size: 32px;
        color: #999;
        margin-left: 10px;
      }

      .upload {
        width: 100%;
        margin-top: 10px;
        padding: 12px 12px 12px 0;
        box-sizing: border-box;

        .info {
          width: 100%;
          text-align: center;
        }

        ::v-deep .info > span {
          width: 380px;
          text-align: left;
          word-break: break-all;

          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        ::v-deep .ai-uploader .fileList .default {
          max-width: 160px;
          max-height: 160px;
        }
      }
    }

    .reply_img {
      margin-top: 20px;
      background-color: #fff;
      padding: 0 20px;
      box-sizing: border-box;

      .img {
        display: inline-block;
        margin-top: 20px;
        font-size: 32px;
      }

      .img_text {
        font-size: 32px;
        color: #999;
        margin-left: 10px;
      }

      .uploads {
        width: 100%;
        margin-top: 10px;
        padding: 12px 12px 12px 0;
        box-sizing: border-box;

        .infos {
          width: 100%;
          text-align: center;
        }

        ::v-deep .ai-uploader .fileList .default {
          width: 160px;
          height: 160px;
        }
      }
    }
  }

  .btn {
    position: fixed;
    bottom: 0;
    line-height: 112px;
    width: 100%;
    background-color: #1355dd;
    color: #fff;
    text-align: center;
  }
}
</style>
