<template>

  <div>
    <div class="download-center">
      <!-- <div class="content-box">

      </div> -->
      <div class="content-box">
        <el-form
          :model="form"
          inline
        >
          <el-form-item label="任务ID">
            <el-input
              v-model="form.task_code"
              size="small"
              clearable
            />
          </el-form-item>
          <!-- <el-form-item label="任务类型">
          <el-select
            v-model="form.task_name"
            size="small"
            clearable
          >
            <el-option
              v-for="item in optionsList.type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="任务状态">
          <el-select
            v-model="form.status"
            size="small"
            clearable
          >
            <el-option
              v-for="item in optionsList.status"
              :key="item.label"
              :label="item.value"
              :value="item.label"
            />
          </el-select>
        </el-form-item> -->
          <el-form-item label="任务时间">
            <BiDatePicker
              v-model="form.time"
              size="small"
              type="datetimerange"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00','23:59:59']"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="small"
              :loading="tableLoading"
              @click="handleCurrentChange(1)"
            >查询</el-button>
            <el-button
              size="small"
              @click="reset"
            >重置</el-button>
          </el-form-item>
        </el-form>
        <BiTable
          :loading="tableLoading"
          :data="tableData"
          size="medium"
          :column="tableColums"
          fixed="sticky"
          max-height="200px"
          :sticky-top="0"
          pagination
          layout="total, prev, pager, next"
          :auto-scroll="false"
          :total="page_info.total"
          :page.sync="page_info.page"
          :limit.sync="page_info.page_size"
          @pagination="handlePageChange"
        />
      </div>
    </div>
    <el-dialog
      title="导出条件详情"
      :visible.sync="dialog.visible"
      append-to-body
      width="50%"
    >

      <el-scrollbar style="height: 60vh;">
        <div class="container">
          <div
            style="padding-right:17px"
            v-html="dialog.content"
          />
        </div>
      </el-scrollbar>
    </el-dialog>

  </div>

</template>

<script lang="jsx">
export default {
  name: 'BiDownloadCenter',
  props: {
    handleTableList: {
      type: Function,
      default: () => {
        return new Promise((res) => {
          res()
        })
      }
    },
    handleStatusList: {
      type: Function,
      default: () => {
        return new Promise((res) => {
          res()
        })
      }
    },
    handleTypeList: {
      type: Function,
      default: () => {
        return new Promise((res) => {
          res()
        })
      }
    }
  },
  data() {
    return {
      tableLoading: false,
      tableData: [],
      tableColums: [
        { prop: 'task_code', label: '任务ID', width: 190 },
        {
          prop: 'status_text',
          label: '任务状态',
          minWidth: 115,
          render: (h, { row }) => {
            if (row.status === 21) {
              return (
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <div style={{ width: '6px', height: '6px', borderRadius: '6px', display: 'inline-block', background: '#0FC6C2', marginRight: '5px' }}></div>
                  <span>{row.status_text}</span>
                </div>)
            } else if (row.status === 0) {
              return (
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <div style={{ width: '6px', height: '6px', borderRadius: '6px', display: 'inline-block', background: '#C9CDD4', marginRight: '5px' }}></div>
                  <span>未开始</span>
                </div>
              )
            } else if (row.status === 11) {
              return (
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <div style={{ width: '6px', height: '6px', borderRadius: '6px', display: 'inline-block', background: '#00B42A', marginRight: '5px' }}></div>
                  <span>
                  执行中
                  </span>
                </div>
              )
            } else if (row.status === 31) {
              return (
                <el-tooltip class={'item'} effect={'dark'} placement={'right'}>
                  <div slot={'content'}>{row.message}</div>
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <div style={{ width: '6px', height: '6px', borderRadius: '6px', display: 'inline-block', background: '#F53F3F', marginRight: '5px' }}></div>
                    <span>
                    导出失败</span>
                  </div>
                </el-tooltip>
              )
            }
          }
        },
        { prop: 'task_name', label: '任务类型', minWidth: 185 },
        {
          prop: 'query_string',
          label: '导出条件',
          minWidth: 342,
          render: (h, { row }) => {
            if (row.query_translation) {
              return (
                <div class={'tooltip-html-box'} domPropsInnerHTML={row.query_translation} onClick={() => this.lookMore(row.query_translation)} style={'WebkitBoxOrient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'}></div>
                // <el-tooltip class={'item'} effect={'dark'} placement={'right'}>
                //   <div slot={'content'} domPropsInnerHTML={row.query_translation}></div>
                //   <span class={'query-translation'} domPropsInnerHTML={row.query_translation}></span>
                // </el-tooltip>
              )
            } else {
              return <span class={'query-translation'}>————</span>
            }
          }
        },
        { prop: 'create_time', label: '创建时间', minWidth: 182 },
        { prop: 'complete_time', label: '完成时间', minWidth: 182 },
        {
          label: '操作',
          width: 70,
          fixed: 'right',
          render: (h, { row }) => {
            if (row.status === 21) {
              return (
                <a class={'link el-button el-button--text'} href={row.path} target={'_blank'} style={{ textDecoration: 'none' }}>
                  下载
                </a>
              )
            } else {
              return <span></span>
            }
          }
        }
      ],
      optionsList: {
        type: [],
        status: []
      },
      form: {
        task_code: '',
        task_name: null,
        status: null,
        time: null
      },
      options: {
        taskTypes: [],
        taskStatus: []
      },
      page_info: {
        page: 1,
        page_size: 20,
        total: 0
      },
      dialog: {
        visible: false,
        content: ''
      }
    }
  },
  computed: {
    searchParams() {
      const { task_name, task_code, status, time } = Object.assign({}, this.form)
      const { page, page_size } = Object.assign({}, this.page_info)
      const [start_time, end_time] = time || []
      return {
        page,
        page_size,
        task_name,
        task_code,
        status,
        start_time,
        end_time
      }
    }
  },
  mounted() {
    this.getOptions()
    this.handleCurrentChange(1)
  },
  methods: {
    handlePageChange({ page }) {
      this.handleCurrentChange(page)
    },
    handleCurrentChange(page) {
      this.form.page = page
      this.getList()
    },
    getOptions() {
      // this.handleStatusList().then((res) => {
      //   if (res.status_code === 1) {
      //     this.optionsList.status = res.data.data
      //   }
      // })
      // this.handleTypeList().then((res) => {
      //   if (res.status_code === 1) {
      //     this.optionsList.type = res.data.data
      //   }
      // })
    },
    reset() {
      this.form = {
        task_code: '',
        task_name: null,
        status: null,
        time: null
      }

      // this.page_info = {
      //   page: 1,
      //   page_size: 20,
      //   total: 0
      // }
    },
    async getList(params) {
      this.tableLoading = true
      const res = await this.handleTableList(this.searchParams)
      this.tableLoading = false
      if (res.status_code === 1) {
        this.tableData = res.data.data
        this.page_info = res.data.page_info
      }
    },
    search() {
      const params = this.formatData()
      this.getList(params)
    },
    lookMore(content) {
      this.dialog.content = ''
      this.dialog.visible = true
      this.dialog.content = content
    }
  }
}
</script>

<style lang="scss" scoped>
.download-center {
  ::v-deep.tooltip-html-box {
    cursor: pointer;
    overflow: hidden;
    line-clamp: 5;
    -webkit-line-clamp: 5;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
  }

  .content-box {
    background-color: white;
    padding: 20px;
  }
  .content-box + .content-box {
    margin-top: 10px;
    // padding-top: 0;
  }
  .el-form-item {
    // margin-bottom: 0;
    margin-bottom: 20px;
    margin-right: 16px;
  }
}
.container {
  padding: 20px;
}

.form-item:nth-child(3) {
  margin-right: 20px;
}
.vue-treeselect {
  margin-top: -1px;
  width: 225px;
}
.el-tag {
  // width: 66px;
  text-align: center;
}
// .el-tag--success {
//   background-color: #e1fff0;
//   border-color: #e1fff0;
//   color: #06c261;
// }
// .el-tag--warning {
//   background-color: #ffeacb;
//   border-color: #ffeacb;
//   color: #e6a23c;
// }
// .el-tag--danger {
//   background-color: #ffdddd;
//   border-color: #ffdddd;
//   color: #f56c6c;
// }
// .el-tag--success {
//   background-color: #e1fff0;
//   border-color: #e1fff0;
//   color: #06c261;
// }
.query-translation {
  display: inline-block;
  height: 23px;
  line-height: 30px;
  width: 80px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
}
.el-scrollbar {
  ::v-deep.el-scrollbar__wrap {
    overflow-x: hidden;
  }
}
.download-center {
  .el-scrollbar {
    ::v-deep.el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
}
</style>
<style lang="scss">
</style>

