<template>
  <div class="app-container">
    <!--    功能项-->
    <div class="seachData" ref="seachDatas">
        <div class="seachData-left">
          跟踪文档列表
        </div>
        <div class="seachData-right">
         <el-input v-model="queryParams.name"
                      placeholder="请输入任务名称"
                      suffix-icon="el-icon-search"
                      clearable
                      size="small"
                      @keyup.enter.native="handleQuery" />
          <div class="seachData-next-div left-div">
            <el-button type="primary"
                      icon="el-icon-plus"
                      size="mini"
                      @click="handleAdd">创建任务
            </el-button>
          </div>
        </div>
    </div>
    <div class="table-center">
      <el-table class="seachTable" v-loading="loading"
                :data="customerList"
                :height="tableHeightCount"
                ref="customerListHeight"
                border>
        <el-table-column label="订阅状态"
                       fixed="left"
                       width="90"
                       align="subscription">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.subscription"
                      active-value="0"
                      inactive-value="1"
                      @change="handleStatusChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column fixed="left"
                        min-width="240" 
                        label="任务名称"
                        prop="name"
                        :show-overflow-tooltip="true"
                        >
          <template slot-scope="scope">
            <div class="ellipsis-hidden"><span class="blue" @click="routerTaskListDetails(scope.row)">{{ isEmpty(scope.row, 'name') }}</span></div>
          </template>
        </el-table-column>
        <el-table-column min-width="160" 
                        fixed="left" 
                        label="任务ID"
                        prop="id"
                        >
          <template slot-scope="scope">
            <span>{{ isEmpty(scope.row, 'id') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="任务说明"
                        min-width="280"
                        prop="docDesc"
                        :show-overflow-tooltip="true"
                        >
          <template slot-scope="scope">
            <div class="ellipsis-hidden">{{ isEmpty(scope.row, 'docDesc') }}</div>
          </template>
        </el-table-column>

        <el-table-column label="最后修改时间"
                        prop="createTime"
                        width="200">
          <template slot-scope="scope">
            <span>{{ dateFilter(scope.row.createTime)  }}</span>
          </template>
        </el-table-column>

        <el-table-column label="状态"
                        prop="status"
                        width="120">
          <template slot-scope="scope">
            <span :class="statusTable(scope.row).class">{{ statusTable(scope.row).text }}</span>
          </template>
        </el-table-column>

        <el-table-column fixed="right"
                        label="操作"
                        width="160">
          <template slot-scope="scope">
            <el-button @click="handleUpdate(scope.row)"
                      type="text"
                      size="small">修改订阅</el-button>
            <el-button @click="handleDelete(scope.row)"
                      type="text"
                      size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0"
                  :total="total"
                  :page.sync="queryParams.pageindex"
                  :limit.sync="queryParams.pagesize"
                  layout="total, prev, pager, next"
                  @pagination="searchCustomer" />
    </div>
    <el-drawer
      class="from-pop-up"
      :title="title"
      :visible.sync="open"
      :direction="'rtl'"
      :wrapperClosable="false"
      :before-close="cancel">
      <el-form ref="form"
               :model="form"
               :rules="rules">
        <el-form-item label="任务名称"
                      prop="name">
          <el-input v-model.trim="form.name"
                    placeholder="请输入任务名称"
                    :disabled="editFlag" />
        </el-form-item>
        <el-form-item label="选择文档"
                      prop="docDocumentId">
          <el-select v-model="form.docDocumentId"
                     clearable
                     placeholder="请选择文档">
            <el-option v-for="item in documentOptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="second-level" v-if="form.docDocumentId === 10000" label="文档链接名称"
                      prop="linkName">
          <el-input v-model.trim="form.linkName"
                    placeholder="请输入文档名称" />
        </el-form-item>
         <el-form-item class="second-level" v-if="form.docDocumentId === 10000" label="文档链接"
                      prop="link">
          <el-input v-model.trim="form.link"
                    placeholder="请输入文档链接" />
        </el-form-item>
        <el-form-item label="邮箱通知"
                      prop="emails">
          <el-input v-model.trim="form.emails"
                    placeholder="请输入要订阅和通知的邮箱"
                    :disabled="editFlag" />
        </el-form-item>
        <el-form-item label="任务说明">
          <el-input v-model.trim="form.docDesc"
                    type="textarea"
                    placeholder="请输入任务说明" />
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button type="primary"
                   @click="submitForm"
                   :loading="submitLoading">确 定</el-button>
        <el-button class="cancel" @click="cancel">取 消</el-button>
      </div>
    </el-drawer>
    <!-- 添加或修改角色配置对话框 -->
    <!-- <el-dialog class="from-pop-up" 
               :title="title"
               :visible.sync="open"
               width="640px">
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary"
                   @click="submitForm"
                   :loading="submitLoading">确 定</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import {
  doctaskList,
  doctaskUpsert,
  doctaskDocuments,
  doctaskSubscription,
  doctaskDelete,
  documentUpsert
} from "@/api/system/customer";
import {
  deepClone
} from "@/utils/index";
export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      submitLoading: false,
      // 总条数
      total: 0,
      // 角色表格数据
      customerList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示弹出层(数据权限)
      openDataScope: false,
      // 日期范围
      searchDateRange: [],
      customerStatusOptions: [
        {
          dictValue: "ENABLE",
          dictLabel: "正常"
        },
        {
          dictValue: "DISABLE",
          dictLabel: "失效"
        }
      ],
      // 查询参数
      queryParams: {
        pageindex: 1,
        pagesize: 10,
        name: ""
      },
      queryParamsStatus: true,
      // 表单参数
      form: {
        id: undefined,
        name: "",
        docDocumentId: "",
        link: "",
        emails: "",
        docDesc: ""
      },
      // 选择文档
      documentOptions: [],
      editFlag: false,
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: "任务名称不能为空", trigger: "blur" }
        ],
        emails: [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              let verificationLink = /^((([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6}\,))*(([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})))$/
              if (verificationLink.test(value) === false) {
                callback(new Error('请输入正确的邮箱地址'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        docDocumentId: [
          { required: true, message: "请选择文档", trigger: "blur" }
        ],
        linkName: [
          { required: true, message: "文档链接名称不能为空", trigger: "blur" }
        ],
        link: [
          { required: true, message: "文档链接不能为空", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              let verificationLink = /(http|https):\/\/([\w.]+\/?)\S*/
              if (verificationLink.test(value) === false) {
                callback(new Error('请输入正确的url'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      },
      tableHeights: 0, // table高度
      customerListHeights: 0 // table真实高度
    };
  },
  created() {
    this.searchCustomer();
    this.$nextTick(() => {
      this.tableHeight();
    })
  },
  computed: {
    // 计算过的height
    tableHeightCount() {
      return this.tableHeights - 112
    }
  },
  methods: {
    dateFilter(time) {    
      if (!time) { 
        // 当时间是null或者无效格式时我们返回空        
        return '-'    
      } else {        
        const date = new Date(time) // 时间戳为10位需*1000,时间戳为13位的话不需乘1000        
        const dateNumFun = (num) => num < 10 ? `0${num}` : num // 使用箭头函数和三目运算以及es6字符串的简单操作。因为只有一个操作不需要{} ,目的就是数字小于10,例如9那么就加上一个0,变成09,否则就返回本身。        // 这是es6的解构赋值。        
        const [Y, M, D, h, m, s] = [            
            date.getFullYear(),            
            dateNumFun(date.getMonth() + 1),            
            dateNumFun(date.getDate()),            
            dateNumFun(date.getHours()),            
            dateNumFun(date.getMinutes()),            
            dateNumFun(date.getSeconds())        
        ]        
        return `${Y}-${M}-${D} ${h}:${m}:${s}` // 一定要注意是反引号,否则无效。    
      }
    },
    tableHeight() {
      let height = document.documentElement.clientHeight - 128
      this.tableHeights = height < 580 ? 580 : height
    },
    // 跳转跟踪文档详情界面
    routerTaskListDetails(row) {
      try {
        this.$router.push({
          path: '/documentManagement/taskListIndex',
          query: {
            id: row.docDocumentId,
            name: row.name
          }
        })
      } catch (err) {
        console.log(err)
      }
    },
    // table显示内容
    isEmpty(row, name) {
      return !row[name] ? '-' : row[name]
    },
    // table显示状态
    statusTable(row) {
      let status = {
        '-1': {
          text: "暂停中",
          class: "span-table span-gray"
        },
        '0': {
          text: "已失效",
          class: "span-table span-red"
        },
        '1': {
          text: "运行中",
          class: "span-table span-blue"
        },
        '2': {
          text: "已完成",
          class: "span-table span-green"
        }
      }
      return status[row.status.toString()] ? status[row.status.toString()] : {
        text: "",
        class: ""
      }
    },
    handleStatusChange(row) {
      let isTrue = row.subscription === '0' ? true : false
      doctaskSubscription({id: row.id, sub: isTrue})
        .then((response) => {
          if (response.code === 200) {
            this.searchCustomer();
            this.msgSuccess("修改状态成功");
          }
        })
        .catch(() => this.msgError("修改状态失败"));
    },
    searchCustomer() {
      this.loading = true;
      this.customerList = []
      doctaskList(this.queryParams)
        .then(response => {
          if (response.code === 200) {
            let content = response.content
            if (this.total !== content.totalSize) {
              this.total = content.totalSize
            }
            let values = content.value
            values.forEach(item => {
              if (item.subscription) {
                item.subscription = '0'
              } else {
                item.subscription = '1'
              }
            });
            this.$set(this, 'customerList', values)
          } else {
            this.customerList = []
          }
          this.loading = false;
          this.$nextTick(() => {
            this.customerListHeights = this.$refs.customerListHeight.offsetHeight
          })
        })
        .catch(error => {
          this.loading = false;
        });
        this.$nextTick(() => {
          this.customerListHeights = this.$refs.customerListHeight.offsetHeight
        })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 取消按钮(数据权限)
    cancelDataScope() {
      this.openDataScope = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        name: "",
        docDocumentId: "",
        link: "",
        emails: "",
        docDesc: ""
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.current = 1;
      this.searchCustomer();
    },
    /** 重置筛选 */
    resetHandleQuery() {
      this.queryParams = {
        current: 1,
        size: 10,
        name: ""
      };
      this.searchCustomer();
    },
    addDoctaskDocuments(isChange) {
      this.documentOptions = []
      doctaskDocuments()
        .then(response => {
          if (response.code === 200) {
            this.documentOptions = response.content.map(item => {
              return  {
                'label': item.name,
                'value': item.id
              }
            })
          }
          if (isChange === 0) {
            this.documentOptions.push({
              label: "其他",
              value: 10000
            })
          }
        })
        .catch(() => {
          if (isChange === 0) {
            this.documentOptions.push({
              label: "其他",
              value: 10000
            })
          }
        });
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.addDoctaskDocuments(0);
      this.open = true;
      // this.editFlag = false;
      this.title = "创建跟踪任务";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.addDoctaskDocuments(1);
      this.handleUpdateFrom(row)
      this.open = true;
      this.title = "修改跟踪任务";
    },
    // 修改from赋值
    handleUpdateFrom(row) {
      this.form.id = row.id ? row.id : undefined
      this.form.name = row.name ? row.name : ""
      this.form.docDocumentId = row.docDocumentId ? row.docDocumentId : ""
      this.form.link = row.link ? row.link : ""
      this.form.emails = row.emails ? row.emails : ""
      this.form.docDesc = row.docDesc ? row.docDesc : ""
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let form = deepClone(this.form)
          let fromNew = {
            name: form.name,
            emails: form.emails,
            docDesc: form.docDesc
          }
          if (form.id) {
            this.submitLoading = true;
            fromNew.id = form.id
            let doctaskUpserts = doctaskUpsert(fromNew)
            Promise.all([doctaskUpserts]).then((result) => {
              if (result[0].code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.queryParams.pageindex = 1
                this.searchCustomer();
              }
              this.submitLoading = false;
            }).catch((error) => {
              this.msgError(error);  
              this.submitLoading = false;
            })
          }
          // 否则新建
          else {
            this.submitLoading = true;
            if (form.docDocumentId !== 10000) {
              fromNew.docDocumentId = Number(form.docDocumentId)
              let doctaskUpserts = doctaskUpsert(fromNew)
              Promise.all([doctaskUpserts]).then((result) => {
                if (result[0].code === 200) {
                  this.msgSuccess("新建成功");
                  this.open = false;
                  this.queryParams.pageindex = 1
                  this.searchCustomer();
                }
                this.submitLoading = false;
              }).catch((error) => {
                this.msgError(error);  
                this.submitLoading = false;
              })
            } else {
              let documentUpsertData = {
                name: form.linkName,
                docUrl: form.link
              }
              let documentUpserts = documentUpsert(documentUpsertData)
              Promise.all([documentUpserts]).then((result) => {
                if (result[0].code === 200) {
                  fromNew.docDocumentId = result[0].content.id
                  doctaskUpsert(fromNew).then(response => {
                      if (response.code === 200) {
                        this.msgSuccess("新建成功");
                        this.open = false;
                        this.queryParams.pageindex = 1
                        this.searchCustomer();
                      }
                      this.submitLoading = false;
                    })
                    .catch((error) => {
                      this.msgError(error);  
                      this.submitLoading = false;
                    })
                }
              }).catch((error) => {
                this.msgError(error);  
                this.submitLoading = false;
              })
            }
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm(
        '是否确认删除名称为"' + row.name + '"的跟踪任务?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          doctaskDelete(row.id).then(response => {
            if (response.code === 200) {
              this.msgSuccess("删除成功");
              this.queryParams.pageindex = 1
              this.searchCustomer();
            }
          })
          .catch((error) => this.msgError(error))
        })
        .catch((error) => this.msgError(error));
    }
  }
};
</script>
<style scoped lang="scss">
@import '@/views/main.scss';
.table-center {
  width: calc(100% - 32px);
  height: calc(100% - 96px);
  display: inline-block;
  margin: 16px;
  background: #fff;
}
/deep/.seachTable {
  margin: 16px;
  width: calc(100% - 32px);
  &.el-table {
    th {
      background: #fff;
      color: #a8a8a8;
    }
    .el-table__header-wrapper th {
      color: #a8a8a8;
    }
    .el-button--small {
      font-size: 14px;
      color: #0052d9;
    }
    .el-button + .el-button {
      margin-left: 16px;
    }
    .span-table {
      padding-left: 16px;
      position: relative;
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(0, -50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }
    }
    .span-red {
      &::before {
        background: rgba(227, 77, 89, 1);
      }
    }
    .span-gray {
      &::before {
        background: rgb(139, 139, 139);
      }
    }
    .span-blue {
      &::before {
        background: rgba(0, 82, 217, 1);
      }
    }
    .span-green {
      &::before {
        background: rgba(5, 168, 112, 1);
      }
    }
  }
}
/deep/.pagination-container {
  height: 32px;
  margin: 0 16px 16px 16px;
  padding: 0 !important;
  width: calc(100% - 32px);
}
/deep/.el-pagination.is-background {
      .el-pager li {
          background-color: #fff;
          border-radius: 3px;
          color: rgba(0, 0, 0, 0.6000);
          border: 1px solid rgba(220, 220, 220, 1);
          border-radius: 3px;
          &:not(.disabled).active {
              color: #fff;
              background: rgba(0, 82, 217, 1);
          }
      }
      .btn-prev, .btn-next {
          border: 0;
          background: #fff;
          color: rgba(0, 0, 0, 0.6000);
      }
  }
  /deep/.el-drawer__header {
    height: 64px;
    font-size: 16px;
    padding: 0;
    line-height: 64px;
    color: rgba(0, 0, 0, 0.9000);
    font-weight: 500;
    margin-bottom: 26px;
    padding: 0 24px;
    box-shadow: inset 0px -1px 0px 0px #dcdcdc;
  }
  .el-form {
    padding: 0 24px;
    /deep/.el-form-item__label {
      width: 100% !important;
      text-align: left;
    }
    /deep/.el-form-item__content {
      margin-left: 0 !important;
    }
    /deep/.el-select, /deep/.el-select > .el-input {
      width: 100%;
    }
  }
  .dialog-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    line-height: 64px;
    height: 64px;
    padding: 0 24px;
    border-top: 1px solid rgba(231, 231, 231, 1);
    /deep/.el-button--medium {
      width: 60px;
      height: 32px;
      border-radius: 3px;
      padding: 0;
      text-align: center;
      line-height: 32px;
      font-size: 14px;
    }
    /deep/.el-button--primary {
      background: #0052D9;
      border-color: #0052D9;
    }
    .el-button--medium {
      &.cancel {
        background: #E7E7E7;
        border-color: #E7E7E7;
        color: rgba(0, 0, 0, 0.9000);
      }
    }
    .el-button + .el-button {
      margin-left: 8px;
    }
  }
  .second-level {
    margin-left: 20px;
  }
</style>