<template>
  <div class="livingview">
    <div class="title">实例编号:SLSUU89ds8SS</div>
    <div class="form">
      <BaseNewForm
        :spanNumber="24"
        :formRow="mainFormRow"
        :ruleForm="mainRuleForm"
        :isFunBtn="false"
      ></BaseNewForm>
    </div>
    <div class="state">
      <div class="left">执行结果：</div>
      <span class="right success">成功</span>
    </div>
    <div class="table">
      <div class="screen">
        <div class="title">筛选</div>
        <div class="btn">
          <el-button type="success" round size="mini">成功</el-button>
          <el-button type="info" round size="mini">失败</el-button>
          <el-button type="info" round size="mini">失效</el-button>
        </div>
      </div>
      <div class="main">
        <BaseTable
          ref="mainTable"
          :tableData="tableData"
          :tableColumn="tableColumn"
          :showIndex="true"
          :tabLoading="mainTabLoading"
          @onFunc="tableButtonHandle"
          :border="false"
        >
          <template #1="{ row }">
            <span class="success">{{ row["1"] }}</span>
          </template></BaseTable
        >
      </div>
    </div>
  </div>
</template>

<script>
import BaseNewForm from "./compoments/baseNewForm";
import BaseTable from "./compoments/baseTable.vue";
export default {
  data() {
    return {
      refreshLoading: false,
      mainFormRow: [
        {
          elCol: [
            {
              type: "input",
              title: "任务名称",
              id: "task_name",
              row: 8,
            },
            {
              type: "input",
              title: "任务类型",
              id: "2",
              row: 8,
            },
            {
              type: "select",
              title: "任务分类",
              id: "3",
              row: 8,
              options: [
                {
                  label: "测试",
                  id: 44,
                },
              ],
            },
          ],
        },
        {
          elCol: [
            {
              type: "input",
              title: "开始时间",
              id: "start_time",
              row: 8,
            },
            {
              type: "input",
              title: "结束时间",
              id: "end_time",
              row: 8,
            },
            {
              type: "input",
              title: "耗时",
              id: "diff_time",
              row: 8,
            },
          ],
        },
        {
          elCol: [
            {
              type: "input",
              title: "原始查询条件",
              id: "8",
              row: 24,
            },
          ],
        },
      ],
      mainRuleForm: {},
      tableColumn: [
        {
          id: "1",
          title: "状态",
        },
        {
          id: "2",
          title: "源系统单据",
        },
        {
          id: "3",
          title: "源系统数据详情",
          tooltip: true,
        },
        {
          id: "4",
          title: "最新传输信息",
          tooltip: true,
        },
        {
          id: "5",
          title: "最新推送时间",
          tooltip: true,
        },
        {
          id: "6",
          title: "补推标记",
          type: "check",
        },
      ],
      tableData: [{ 1: "已完成" }],
    };
  },
  components: {
    BaseNewForm,
    BaseTable,
  },
  computed: {
    // 操作框的宽度
    funWidth() {
      return this.funData.length * 70;
    },
  },
  methods: {
    tableButtonHandle() {},
  },
};
</script>

<style scoped lang="scss">
.livingview {
  width: 100%;
  padding: 20px;
  background-color: #fff;
  border-radius: 20px;
  > .title {
    color: red;
    font-weight: 300;
    margin-bottom: 20px;
  }
  .state {
    margin-top: 20px;
    width: 300px;
    display: flex;
    align-items: center;
  }
  .table {
    background-color: #fff;
    margin-top: 30px;
    > .screen {
      display: flex;
      align-items: center;
      margin-bottom: 30px;
      > .title {
        color: #000;
        font-size: 18px;
        margin-right: 20px;
      }
    }
  }
  .success {
    background-color: #7ec050;
    color: #fff;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 14px;
  }
}
</style>