<template>
  <div class="about">
    <!-- 列表 -->
    <div class="center">
      <!-- <p> -->
      <div>
        <div class="por">
          <div class="selectBox" style="width: 100%;position: relative;">
            <div class="selectBox_show" v-on:click.stop="arrowDown">
              <span>执行人</span>
              <!-- <i class="icon icon_arrowDown"></i> -->
              <span class="right" title="请选择">{{ unitName }}</span>
              <input type="hidden" name="unit" v-model="unitModel" />
            </div>
            <div class="selectBox_list" v-show="isShowSelect">
              <div
                class="selectBox_listLi"
                v-for="(item, index) in dataList"
                :key="index"
                @click.stop="select(item, index)"
              >
                {{ item.value }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 执行人<span class="right"
          ><input v-model="projectname" placeholder="执行人"
        /></span> -->
      <!-- </p> -->
      <p>
        标题<span class="right"
          ><input v-model="name" placeholder="标题"
        /></span>
      </p>
      <p>
        开始日期<span class="right"
          ><input v-model="addtime" placeholder="签订日期"
        /></span>
      </p>

      <p>
        结束日期<span class="right"
          ><input v-model="endtime" placeholder="结束日期"
        /></span>
      </p>
    </div>
    <!-- end -->
    <!-- 详细信息 -->
    <div class="mark">
      <p>任务内容</p>
      <el-input
        type="textarea"
        :rows="6"
        placeholder="详细信息"
        v-model="textarea"
      >
      </el-input>
    </div>

    <!-- 备注 -->
    <div class="mark">
      <p>备注</p>
      <el-input
        type="textarea"
        :rows="6"
        placeholder="备注"
        v-model="textarea1"
      >
      </el-input>
    </div>
    <!-- end -->
    <div style="background:#f6fbff">
      <button @click="sumit" class="btn">
        提交
      </button>
    </div>
  </div>
</template>
<script>
import { SaveTask } from "@/api/user";//封装的接口
export default {
  data() {
    return {
      textarea: "", //详细信息
      textarea1: "", //备注
      name: "", //负责人
      projectname: "", //项目名称
      addtime: "", //签订日期
      endtime: "", //结束时间
      isShowSelect: false,
      dataList: [
        { key: -1, value: "请选择" },
        { key: 0, value: "苹果" },
        { key: 1, value: "香蕉" },
        { key: 2, value: "荔枝" },
        { key: 3, value: "火龙果" },
        { key: 4, value: "橘子" },
        { key: 5, value: "黄瓜" }
      ],
      unitName: "请选择"
    };
  },
  created: {},
  mounted: {},
  methods: {
    arrowDown() {
      this.isShowSelect = !this.isShowSelect;
    },
    select(item, index) {
      this.isShowSelect = false;
      console.log(item);
      console.log(index);
      this.unitModel = index;
      this.unitName = item.value;
    },
    // 表单提交
    sumit() {
      console.log(this.textarea, "详细信息");
      console.log(this.textarea1, "备注");
      console.log(this.projectname, "执行人");
      console.log(this.name, "标题");
      console.log(this.addtime, "开始时间");
      console.log(this.endtime, "结束时间");
      var data = {
        Title: this.name, //标题
        StartTime: this.addtime, //开始执行时间
        EndTime: this.endtime, //结束执行时间
        TaskContext: this.textarea, //内容
        Remarks: this.textarea1, //备注
        InitiateUserId: this.aaaa, //发起人
        ExecutorUserId: this.as //执行人
      };
      data = this.$qs.stringify(data);
      console.log(data);
      SaveTask(data).then(res => {//SaveTask是封装的接口名字
        console.log(res);
      });
    },
    upImg() {
      // window.onload = function() {
      let fileTag = document.getElementById("file");
      console.log(fileTag);
      // console.log(this.pic)
      let that = this;

      fileTag.onchange = function() {
        let file = fileTag.files[0];
        let fileReader = new FileReader();
        console.log(file.name);
        //console.log(fileReader)
        // console.log(that.pic)
        fileReader.onloadend = function() {
          if (fileReader.readyState == fileReader.DONE) {
            // console.log(that.pic)
            //console.log(fileReader)

            if (that.pic == "") {
              that.pic = fileReader.result;
              that.input1 = false;
              //console.log(that.pic)
              that.upLoad(fileReader.result);
              return;
            } else {
              if (that.pic2 == "") {
                console.log(2222);
                that.pic2 = fileReader.result;
                that.input2 = false;
                return;
              } else {
                if (that.pic3 == "") {
                  console.log(3333);
                  that.pic3 = fileReader.result;
                  that.input3 = false;
                  return;
                } else {
                  if (that.pic4 == "") {
                    console.log(4444);
                    that.pic4 = fileReader.result;
                    that.input4 = false;
                    return;
                  } else {
                    console.log(5555);
                    if (that.pic5 == "") {
                      that.pic5 = fileReader.result;
                      that.input5 = false;
                      return;
                    }
                  }
                }
              }
            }
            // console.log(that.pic)
          }
        };
        fileReader.readAsDataURL(file);
      };
      // }
    },
    delImg(num) {
      if (num == 1) {
        this.pic = "";
        this.input1 = true;
      }
      if (num == 2) {
        this.pic2 = "";
        this.input2 = true;
      }
      if (num == 3) {
        this.pic3 = "";
        this.input3 = true;
      }
      if (num == 4) {
        this.pic4 = "";
        this.input4 = true;
      }
      if (num == 5) {
        this.pic5 = "";
        this.input5 = true;
      }
    }
  }
};
</script>
<style scoped>
/* 上传 */
.unload {
  width: 90%;
  margin: 10px auto;
  background: #fff;
  padding: 10px;
}
#img {
  width: 70px;
  height: 75px;
}
#order .imgBox {
  margin-bottom: 100px;
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  height: 250px;
}

#order .Img {
  width: 90px;
  height: 90px;
  background: #fff;
  text-align: center;
  line-height: 132px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  position: relative;
  margin: 0 20px 20px 0;
}

#order .myInput {
  opacity: 0;
  position: absolute;
  top: 0;
  top: 0;
  width: 90px;
  height: 90px;
  left: 0;
}

#order .myDel {
  color: #fff;
  position: absolute;
  right: -10px;
  top: -7px;
  width: 25px;
  height: 25px;
  border-radius: 25px;
  line-height: 25px;
  background: rgba(0, 0, 0, 0.5);
}
.myDel img {
  width: 20px;
  height: 20px;
  position: absolute;
  top: -10px;
  left: -10px;
}
.Img {
  position: relative;
  margin-right: 10px;
}
/* end */
.mark {
  margin-top: 10px;
  background: #fff;
}
.mark p {
  margin-left: 10px;
  padding-top: 10px;
  padding-bottom: 5px;
}
.mark >>> .el-textarea__inner {
  border: 0;
  resize: none; /* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
  padding-left: 10px;
}
input {
  text-align: right;
  border: none;
  outline-style: none;
}
.btn {
  width: 70%;
  margin: 20px 15%;
  text-align: center;
  line-height: 40px;
  background: #52a8fb;
  border-radius: 5px;
  /* position: fixed; */
  /* bottom: 0px; */
  border: none;
  /* margin-left: -10px; */
  color: #fff;
}

.right {
  float: right;
  margin-right: 10px;
  line-height: 40px;
}
.el-button {
  width: 80%;
  margin: 0 10%;
  display: inline-block;
  line-height: 40px;
  background: #52a8fb;
  margin-top: 35px;
  border-color: #52a8fb;
}

.center {
  /* margin-top: 10px; */
}
.center > p {
  margin: 0;
  padding: 0;
  height: 40px;
  line-height: 40px;
  padding-left: 15px;
  background: #fff;
  /* border-top: 1px solid; */
}
.center p:not(:first-child) {
  margin: 0;
  padding: 0;
  height: 40px;
  line-height: 40px;
  padding-left: 12px;
  background: #fff;
  border-top: 2px solid #fcfcfc;
}
* {
  margin: 0;
  padding: 0;
}
.about {
  width: 100%;
  height: 100%;
  background-color: #f7fbff;
  font-size: 14px;
}
/* 下拉列表执行人 */
.selectBox_show {
  line-height: 40px;
  padding-left: 12px;
  background: #fff;
}
.selectBox_listLi {
  padding-left: 12px;
  line-height: 25px;
}
.selectBox_list {
    width: 30%;
    display: block;
    background: #ddd;
    position: absolute;
    right: 0;
    text-align: right;
    padding-right: 20px
}
/* end */
</style>