<style scope>
.circle {
  width: 20px;
  height: 20px;
  display: inline-block;
  text-align: center;
  background: grey;
  border-radius: 20px;
  margin-right: 5px;
}
.circle.red {
  background: #fe4433;
}
.circle.green {
  background: green;
}
.circle.black {
  background: black;
}
.remark {
  margin-right: 20px;
  font-size: 12px;
  display: inline-block;
  vertical-align: text-top;
}
.wd100 {
  width: 100% !important;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
<template>
  <div class="flexOne companyManagement">
    <div class="query-box">
      <ul>
        <li>
          <span>
            <em>{{$t('objFill.v101.jihuazhuant')}}</em>
            <el-select v-model="statusValue" :placeholder="$t('pub.pleaseSel')" @change="changeStatus">
              <el-option :label="$t('pub.unlimitedSel')" value="-1"></el-option>
              <el-option :label="$t('objFill.v101.jingxingzh')" value="0"></el-option>
              <el-option :label="$t('objFill.v101.chaoshiwwanc')" value="1"></el-option>
              <el-option :label="$t('objFill.v101.chaoshiwanc')" value="2"></el-option>
              <el-option :label="$t('visaT.complete')" value="3"></el-option>
              <!-- <el-option :label="$t('leade.leader_noStart')" value="-2"></el-option> -->
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('objFill.v101.lixshepzta')}}</em>
            <el-select v-model="examineStatusValue" :placeholder="$t('pub.pleaseSel')" @change="changeStatus">
              <el-option :label="$t('pub.unlimitedSel')" value="-2"></el-option>
              <el-option :label="$t('objFill.shengpizhong')" value="0"></el-option>
              <el-option :label="$t('objFill.v101.shenpitguo')" value="1"></el-option>
              <el-option :label="$t('objFill.v101.shenpibohui')" value="-1"></el-option>
            </el-select>
          </span>
        </li>
        <!-- <li>
          <span><em>{{$t('admin.admin_domain')}}</em>
            <el-input @keyup.enter.native="getList" v-model="msg.Domain" :placeholder="$t('pub.pleaseImport')">
            </el-input>
          </span>
        </li>
        <li>
          <span><em>{{$t('admin.admin_status')}}</em>
            <el-select v-model="msg.Status" :placeholder="$t('pub.unlimitedSel')">
              <el-option :label="$t('pub.unlimitedSel')" value=''></el-option>
              <el-option :label="$t('pub.openSel')" value='0'></el-option>
              <el-option :label="$t('pub.closeSel')" value='1'></el-option>
            </el-select>
          </span>
        </li>-->
        <li>
          <!-- <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" /> &nbsp; -->
          <input type="button" class="normalBtn" :value="$t('objFill.v101.xinzengjihua')" @click="add" />
        </li>
      </ul>
    </div>
    <div style="margin:10px 0;">
      <span class="circle green"></span>
      <span class="remark">{{$t('objFill.v101.jingxingzh')}}</span>
      <span class="circle red"></span>
      <span class="remark">{{$t('objFill.v101.chaoshi')}}</span>
      <span class="circle black"></span>
      <span class="remark">{{$t('visaT.complete')}}</span>
      <span class="circle"></span>
      <span class="remark">{{$t('leader.leader_noStart')}}</span>
    </div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th>{{$t('hotel.hotel_status')}}</th>
        <th>{{$t('objFill.biaoqian')}}</th>
        <th width="300">{{$t('objFill.biaoti')}}</th>
        <th>{{$t('objFill.v101.neirogyao')}}</th>
        <th>{{$t('system.table_begTime')}}</th>
        <th>{{$t('objFill.v101.Rest.qianyuejzsj')}}</th>
        <th>{{$t('fnc.cjshijian')}}</th>
        <th>{{$t('objFill.v101.zongjllxspi')}}</th>
        <th>{{$t('objFill.v101.zhuglixspi')}}</th>
        <th>{{$t('objFill.v101.dangqianjind')}}</th>
        <th>{{$t('objFill.v101.zongjlwcshp')}}</th>
        <th>{{$t('objFill.v101.zhugwancspi')}}</th>
        <th width="200">{{$t('hotel.table_operat')}}</th>
      </tr>
      <tr v-for="(item, index) in tempList" :key="index">
        <td>
          <span
            class="circle"
            v-if="(item.ExamineStatus==0||item.ExamineStatus==-1)&&(item.ZongExamineStatus==0||item.ZongExamineStatus==-1)"
          ></span>
          <span class="circle green" v-else-if="item.Status==0"></span>
          <span class="circle red" v-else-if="item.Status==1||item.Status==2"></span>
          <span class="circle black" v-else-if="item.Status==3"></span>
        </td>
        <td>
          <el-tag v-if="item.Tags.length>0">{{item.Tags}}</el-tag>
        </td>
        <td>{{item.Title}}</td>
        <td width="250">
          <el-tooltip effect="dark" :content="item.Description" placement="top-start">
            <span>{{item.Description.length>23?item.Description.substring(0,23)+"...":item.Description}}</span>
          </el-tooltip>
        </td>
        <td>{{item.BeginTime}}</td>
        <td>{{item.EndTime}}</td>
        <td>{{item.CreateDate}}</td>
        <td>
          <span v-if="item.ZongExamineStatus==0" style="color:grey">{{$t('objFill.shengpizhong')}}</span>
          <span
            v-else-if="item.ZongExamineStatus==1"
            style="color:green;text-decoration: underline;"
          >{{$t('fnc.ytongguo')}}</span>
          <span v-else style="color:red;text-decoration: underline;">{{$t('objFill.yibohui')}}</span>
        </td>
        <td>
          <span v-if="item.ExamineStatus==0" style="color:grey">{{$t('objFill.shengpizhong')}}</span>
          <span
            v-else-if="item.ExamineStatus==1"
            style="color:green;text-decoration: underline;"
          >{{$t('fnc.ytongguo')}}</span>
          <span v-else style="color:red;text-decoration: underline;">{{$t('objFill.yibohui')}}</span>
        </td>
        <td>
          <el-progress
            :text-inside="true"
            :stroke-width="24"
            :percentage="item.Progree"
            status="success"
          ></el-progress>
        </td>
        <td>
          <span v-if="item.Status==2||item.Status==3">
            <span v-if="item.ZongFinishExamineStatus==0" style="color:grey">{{$t('objFill.shengpizhong')}}</span>
            <span
              v-else-if="item.ZongFinishExamineStatus==1"
              style="color:green;text-decoration: underline;"
            >{{$t('fnc.ytongguo')}}</span>
            <span v-else style="color:red;text-decoration: underline;">{{$t('objFill.yibohui')}}</span>
          </span>
        </td>
        <td>
          <span v-if="item.Status==2||item.Status==3">
            <span v-if="item.FinishExamineStatus==0" style="color:grey">{{$t('objFill.shengpizhong')}}</span>
            <span
              v-else-if="item.FinishExamineStatus==1"
              style="color:green;text-decoration: underline;"
            >{{$t('fnc.ytongguo')}}</span>
            <span v-else style="color:red;text-decoration: underline;">{{$t('objFill.yibohui')}}</span>
          </span>
        </td>
        <td>
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('pub.edit')"
            placement="top-start"
            v-if="(item.ExamineStatus==0 || item.ExamineStatus==-1) && (item.ZongExamineStatus==0 || item.ZongExamineStatus==-1)"
          >
            <el-button
              @click.stop="EditMsg(item)"
              style="padding:4px"
              type="primary"
              icon="iconfont icon-bianji"
              circle
            ></el-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('system.table_delete')"
            placement="top-start"
            v-if="item.ExamineStatus==0 && item.ZongExamineStatus==0"
          >
            <el-button
              style="padding:4px"
              type="danger"
              icon="el-icon-delete"
              @click.stop="deleteItem(item.Id)"
              circle
            ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="$t('fnc.xiangqing')" placement="top-start">
            <el-button
              style="padding:4px"
              type="info"
              icon="el-icon-search"
              @click.stop="query(item.Id)"
              circle
            ></el-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('objFill.v101.gengxinjindu')"
            placement="top-start"
            v-if="(item.ExamineStatus==1 ||item.ZongExamineStatus==1) && (item.Status==1 || item.Status==0)"
          >
            <el-button
              style="padding:4px"
              type="primary"
              icon="el-icon-check"
              @click.stop="query2(item.Id)"
              circle
            ></el-button>
          </el-tooltip>
        </td>
      </tr>
    </table>
    <el-dialog
      width="40%"
      :title="dialogTitle"
      :visible.sync="outerVisible"
      :close-on-click-modal="false"
      center
      :before-close="closeChangeMachie"
    >
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px">
        <el-form-item class="wd100" :label="$t('objFill.v101.jihuabiaot')" prop="Title">
          <el-input clearable type="text" v-model="addMsg.Title" :placeholder="$t('objFill.v101.qingsrjhbti')"></el-input>
        </el-form-item>
        <el-form-item class="wd100" :label="$t('objFill.v101.jihuaneir')" prop="Description">
          <el-input
            clearable
            type="textarea"
            v-model="addMsg.Description"
            :rows="8"
            :placeholder="$t('objFill.v101.qingsrjhnro')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('objFill.v101.jihuariqi')" prop="TimeRanges">
          <el-date-picker
            :picker-options="pickerOptions"
            v-model="addMsg.TimeRanges"
            type="datetimerange"
            class="wd100"
            align="right"
            :start-placeholder="$t('OrderList.star')"
            :end-placeholder="$t('OrderList.end')"
            value-format="yyyy-MM-dd HH:mm"
            :default-time="['09:30:00', '18:00:00']"
          ></el-date-picker>
        </el-form-item>
        <el-form-item class="wd100" :label="$t('objFill.v101.jihuabiaoqian')">
          <el-tag
            :key="tag"
            v-for="tag in addMsg.TempTags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >{{tag}}</el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            maxlength="6"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          ></el-input>
          <el-button
            v-else-if="addMsg.TempTags.length<1"
            class="button-new-tag"
            size="small"
            @click="showInput"
          >+  {{$t('objFill.xingzenbiaoqian')}}</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button
          class="hollowFixedBtn"
          @click="outerVisible = false,resetForm('addMsg')"
        >{{$t('pub.cancelBtn')}}</button>
        &nbsp;
        <button
          class="normalBtn"
          type="primary"
          @click="submitForm('addMsg')"
        >{{$t('pub.saveBtn')}}</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      statusValue: "-1",
      dialogTitle: this.$t('objFill.v101.xinzengjihua'),
      outerVisible: false,
      rules: {
        //表单验证
        Title: [
          {
            required: true,
            message: this.$t('objFill.v101.qingsrjhbti'),
            trigger: "blur"
          }
        ],
        Description: [
          {
            required: true,
            message: this.$t('objFill.v101.qingsrjhnro'),
            trigger: "blur"
          }
        ],
        TimeRanges: [
          {
            required: true,
            message: this.$t('objFill.v101.qingxzjihriqi'),
            trigger: "blur"
          }
        ]
      },
      addMsg: {
        Id: "0",
        Title: "",
        Description: "",
        TimeRanges: "",
        TempTags: [],
        BeginTime: "",
        EndTime: "",
        Tags: ""
      },
      inputVisible: false,
      inputValue: "",
      datas: [],
      tempList: [],
      examineStatusValue: "-2",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7; //禁用以前的日期，今天不禁用
          // return date.getTime() <= Date.now();    //禁用今天以及以前的日期
        }
      }
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    add() {
      this.dialogTitle = this.$t('objFill.v101.xinzengjihua');
      this.outerVisible = true;
    },

    EditMsg(item) {
      this.dialogTitle = this.$t('objFill.v101.xiugaijihua');
      (this.addMsg = {
        Id: item.Id,
        Title: item.Title,
        Description: item.Description,
        TimeRanges: [item.BeginTime, item.EndTime],
        TempTags: [item.Tags],
        BeginTime: item.BeginTime,
        EndTime: item.EndTime,
        Tags: item.Tags
      }),
        (this.outerVisible = true);
    },
    changeStatus() {
      this.tempList = [];
      this.datas.forEach(x => {
        let isAdd = false;
        if (
          (this.statusValue != -1 && x.Status == this.statusValue) ||
          this.statusValue == -1
        ) {
          isAdd = true;
        }
        if (isAdd) {
          if (
            (this.examineStatusValue != -2 &&
              x.ExamineStatus == this.examineStatusValue) ||
            this.examineStatusValue == -2
          ) {
            isAdd = true;
          } else {
            isAdd = false;
          }
        }
        if (isAdd) {
          this.tempList.push(x);
        }
      });
    },
    handleClose(tag) {
      this.addMsg.TempTags.splice(this.addMsg.TempTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.addMsg.TempTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    closeChangeMachie(done) {
      this.resetForm("addMsg");
      done();
    },
    resetForm(formName) {
      //弹出框取消 初始化谈框内表单
      this.$refs[formName].resetFields();
      this.addMsg.Id = "0";
    },
    submitForm(addMsg) {
      //提交创建、修改表单
      this.$refs[addMsg].validate(valid => {
        if (valid) {
          this.addData();
        } else {
          return false;
        }
      });
    },
    addData() {
      this.addMsg.BeginTime = this.addMsg.TimeRanges[0];
      this.addMsg.EndTime = this.addMsg.TimeRanges[1];
      if (this.addMsg.BeginTime.split(' ')[0] != this.addMsg.EndTime.split(' ')[0]) {
        this.$message.error(this.$t('objFill.v101.zhintjdrgzjh'));
      } else {
        this.addMsg.Tags =
          this.addMsg.TempTags && this.addMsg.TempTags.length == 1
            ? this.addMsg.TempTags[0]
            : "";

        //新增数据
        this.apipost(
          "user_post_SetWork",
          this.addMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.$message.success(res.data.message);
              this.outerVisible = false;
              this.getList();
              this.resetForm("addMsg");
            } else {
              this.$message.error(res.data.message);
            }
          },
          err => {}
        );
      }
      //this.getList();
    },
    getList() {
      this.apipost(
        "user_post_GetMyWork",
        {},
        res => {
          if (res.data.resultCode == 1) {
            //this.$message.success(res.data.message);
            this.datas = res.data.data;
            this.tempList = res.data.data;
          } else {
            this.$message.error(res.data.message);
          }
        },
        err => {}
      );
    },
    deleteItem(id) {
      this.apipost(
        "user_post_DeleteWork",
        { id },
        res => {
          if (res.data.resultCode == 1) {
            this.$message.success(res.data.message);
            this.statusValue = "-1";
            this.examineStatusValue = "-2";
            this.getList();
          } else {
            this.$message.error(res.data.message);
          }
        },
        err => {}
      );
    },
    query(id) {
      this.$router.push({
        name: "workDetails",
        query: {
          id: id,
          blank: "y"
        }
      });
    },
    query2(id) {
      this.$router.push({
        name: "workDetails",
        query: {
          id: id,
          update: "u",
          blank: "y"
        }
      });
    }
  }
};
</script>
