<template>
  <div class="task-center">
    <div
      class="content-body"
      style="margin-top:0;"
    >
      <div class="content-box">
        <div class="action-row">
          <div
            class="action-left-row"
            style="display: flex;align-items: center;"
          >
            <!-- <div style="margin-right: 6px;color: #333;">任务ID</div> -->
            <div>
              <el-input
                v-model="formData.task_no"
                placeholder="请输入任务ID"
                clearable
                style="width:320px"
              >

                <el-button
                  slot="append"
                  icon="el-icon-search"
                  style="width:76px"
                  :loading="loading"
                  @click="search"
                ></el-button>
              </el-input>
            </div>
          </div>
        </div>
      </div>
      <div class="content-box">

        <div class="table-table">
          <BiTable
            ref="biTable"
            :loading="loading"
            :data="tableData"
            size="medium"
            :column="tableColumns"
            fixed="sticky"
            max-height="200px"
            :sticky-top="0"
            :background="false"
            pagination
            layout="total, sizes,prev, pager, next, jumper"
            :auto-scroll="false"
            border
            :cell-style="tableCell"
            :header-cell-style="tableRowClassName"
            :total="page_info.total"
            :page.sync="page_info.num"
            :limit.sync="page_info.size"
            @pagination="handleCurrentChange"
          >
            <template v-slot:task_status="{ row }">

              <el-tooltip
                v-if="String(row.task_status)==='3'"
                effect="dark"
                :content="row.remark"
                placement="top"
              >
                <!-- <div style="color: #06c261;">{{ taskStatusText(row.task_status) }}</div> -->
                <div style="display: flex; align-items: center ">
                  <div style="width:6px;height:6px;border-radius:6px;display:inline-block;background:#0FC6C2;margin-right:5px "></div>
                  <span>
                    {{ taskStatusText(row.task_status) }}
                  </span>
                </div>
              </el-tooltip>
              <div v-else-if="String(row.task_status)==='4'">
                <div style="display: flex; align-items: center ">
                  <div style="width:6px;height:6px;border-radius:6px;display:inline-block;background:#F53F3F;margin-right:5px "></div>
                  <span>
                    {{ taskStatusText(row.task_status) }}
                  </span>
                </div>
              </div>
              <div v-else-if="String(row.task_status)==='2'">
                <div style="display: flex; align-items: center ">
                  <div style="width:6px;height:6px;border-radius:6px;display:inline-block;background:#00B42A;margin-right:5px "></div>
                  <span>
                    {{ taskStatusText(row.task_status) }}
                  </span>
                </div>
              </div>
              <div v-else>
                <div style="display: flex; align-items: center ">
                  <div style="width:6px;height:6px;border-radius:6px;display:inline-block;background:#FF7D00;margin-right:5px "></div>
                  <span>
                    {{ taskStatusText(row.task_status) }}
                  </span>
                </div>
              </div>
            </template>
            <!-- <template v-slot:type_text="{ row }">
            <span>{{ taskTypeText(row.task_type) }}</span>
          </template> -->
            <template v-slot:query_translation="{ row }">
              <div
                class="query_translation"
                style="width: 100%;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor: pointer;"
                @click="clickShowInfo(row.conditions)"
              >
                <p
                  v-for="item in row.conditions"
                  :key="item.field"
                  style="margin: 0;"
                >
                  <span v-html="item.field"></span>
                  <span>:</span>
                  <span v-html="item.value"></span>
                </p>

              </div>

            </template>
            <template v-slot:finish_time="{ row }">
              <div>{{ row.finish_time?row.finish_time:'-' }}</div>
            </template>
          </BiTable>
        </div>
      </div>
    </div>
    <el-dialog
      title="任务条件详情"
      :visible.sync="showInfo.visible"
      append-to-body
      width="700px"
    >
      <div
        class="task-detail"
        style="max-height: 600px;overflow: auto;"
      >
        <p
          v-for="item in showInfo.info"
          :key="item.field"
        >
          <span>{{ item.field }}</span>
          <span>:</span>
          <span>{{ item.value }}</span>
        </p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { taskOption, taskList } from './api'
export default {
  name: 'TaskCenterShow',
  props: {
    title: {
      type: String,
      default: '组别'
    },
    userId: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      system: this.$BI.system,
      loading: false,
      tableData: [],
      formData: {
        task_no: ''
      },
      page_info: {
        num: 1,
        size: 20,
        total: 0
      },
      tableColumns: [
        {
          label: '任务ID',
          prop: 'id',
          width: 132,
          render: (h, { row }) => {
            return <span>{row._id.oid}</span>
          }
        },
        { label: '任务页面', prop: 'page_name', width: 92 },
        {
          label: '任务状态',
          prop: 'task_status',
          width: 92,
          slotScope: true
        },
        {
          label: '任务类型',
          prop: 'type_text',
          width: 92,
          render: (h, { row }) => {
            return <span>{this.taskTypeText(row.task_type)}</span>
          }
        },
        {
          label: '任务条件',
          prop: 'query_translation',
          minWidth: 200,
          slotScope: true
        },
        { label: '创建时间', prop: 'create_time', width: 115 },
        {
          label: '完成时间',
          prop: 'finish_time',
          width: 115,
          slotScope: true
        }
      ],
      tableRowClassName: {},
      tableCell: {},
      taskType: [],
      taskStatus: [],
      showInfo: {
        visible: false,
        info: ''
      }
    }
  },
  computed: {
    params() {
      const { task_no, num, size } = Object.assign({}, this.formData, this.page_info)
      const obj = {
        system: this.system,
        user_id: this.userId,
        task_id: task_no,
        page_info: {
          num,
          size
        }
      }
      return obj
    }
  },
  mounted() {
    this.handlerOpen()
  },
  methods: {
    // taskOption() {
    //   return request({
    //     url: this.baseUrl + '/taskMessage/option',
    //     method: 'get'
    //   })
    // },
    // taskList(data) {
    //   return request({
    //     url: this.baseUrl + '/taskMessage/taskMessages',
    //     method: 'post',
    //     data
    //   })
    // },
    handlerOpen() {
      this.getOption()
      this.search()
    },
    async getOption() {
      const res = await taskOption(this.$BI.env)
      if (res.status_code === 1) {
        this.taskStatus = res.data.task_status
        this.taskType = res.data.task_types
      }
    },
    taskStatusText(value) {
      const item = this.taskStatus.find((item) => String(item.value) === String(value))
      if (item) return item.name
      return '-'
    },
    taskTypeText(value) {
      const item = this.taskType.find((item) => String(item.value) === String(value))
      if (item) return item.name
      return '-'
    },
    handlerClose() {},
    search() {
      this.page_info.num = 1
      this.getList()
    },
    handleCurrentChange() {
      this.getList()
    },
    async getList(params = this.params) {
      this.loading = true
      // taskList
      const res = await taskList(this.$BI.env, params)
      this.loading = false
      if (res.status_code === 1) {
        this.tableData = res.data.data
        this.page_info = res.data.page_info
      }
    },
    clickShowInfo(info) {
      this.showInfo.info = info
      this.showInfo.visible = true
    }
  }
}
</script>

<style lang="scss" scope>
.task-detail {
  p {
    margin: 0;
  }
}
.task-center {
  // background-color: #eeeff5;
  .query_translation {
    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: #ffffff;
  padding: 20px;
}
.task-center .content-body {
  .content-box + .content-box {
    // margin-top: 10px;
    // padding-top: 20px;
    padding-top: 0;
  }
}

.el-form-item {
  // margin-bottom: 0;
  margin-bottom: 10px;
}
.agency-form {
  padding: 20px;
}
.agency-header {
  margin-bottom: 20px;
  float: right;
}
</style>
