<template>
  <div class="bill-achievements">
    <vxe-table
      border
      ref="xTable"
      :data="tableData"
      :show-header="false"
      :cell-style="cellStyle"
    >
      <vxe-table-column
        field="name"
        title="name"
        width="160"
        align="center"
      ></vxe-table-column>
      <vxe-table-column field="value" title="type">
        <template slot-scope="scope">
          <component
            :is="scope.row.type"
            :disabled="state == 'readOnly'"
            :attr="{ field: 'value', row: scope.row, attr: scope.row.attr }"
            :detailData="
              scope.row.attr && scope.row.attr.tableData
                ? scope.row.attr.tableData
                : []
            "
            @dataChange="updataTableData($event, scope.$rowIndex)"
          ></component>
        </template>
      </vxe-table-column>
    </vxe-table>
  </div>
</template>
<script>
import vxeAchievements from "./vxe-achievements.js";
import dateControl from "./components/dateControl.vue";
import vxeTableControl from "./components/vxe-table.vue";
import radioGroupControl from "./components/radioGroupControl.vue";
import inputControl from "./components/inputControl.vue";
import textAreaControl from "./components/textAreaControl.vue";
import input from "../util/bc_input.js";
export default {
  mixins: [vxeAchievements, input],
  components: {
    vxeTableControl,
    dateControl,
    radioGroupControl,
    inputControl,
    textAreaControl,
  },

  data() {
    return {
      tableData: [
        {
          name: "项目名称",
          type: "inputControl",
          value: "",
        },
        {
          name: "项目属性",
          type: "radioGroupControl",
          value: "新增项目",
        },
        {
          name: "项目起止时间",
          type: "dateControl",
          value: [],
        },
        {
          name: "项目资金申请(万元)",
          type: "vxeTableControl",
          attr: {
            showHeader: false,
            addObj: {
              name: "",
              value: "",
            },
            tableData: [
              {
                name: "资金总额:",
                value: "",
              },
              {
                name: " (一)上级工会预算拨款:",
                value: "",
              },
              {
                name: "1.工会经费:",
                value: "",
              },
              {
                name: "2.财政拨款:",
                value: "",
              },
              {
                name: "(二)自有资金:",
                value: "",
              },
              {
                name: "1.工会经费:",
                value: "",
              },
              {
                name: "2.财政补助收入:",
                value: "",
              },
              {
                name: "3.行政补助收入:",
                value: "",
              },
              {
                name: "4.事业收入:",
                value: "",
              },
              {
                name: "5.经营性收入:",
                value: "",
              },
            ],
            columns: [
              {
                field: "name",
                title: "收入名称",
                width: 230,
                type: "inputControl",
              },
              {
                field: "value",
                title: "数值",
                type: "inputControl",
              },
            ],
          },
        },
        {
          name: "单位(部门)职能概述",
          type: "textAreaControl",
          value: "",
        },
        {
          name: "项目概况",
          type: "textAreaControl",
          value: "",
        },
        {
          name: "项目立项情况",
          type: "vxeTableControl",
          attr: {
            showHeader: false,
            addObj: {
              name: "",
              value: "",
            },
            tableData: [
              {
                name: "项目立项的依据",
                value: "",
              },
              {
                name: "项目申报的可行性",
                value: "",
              },
              {
                name: "项目申报的必要性",
                value: "",
              },
            ],
            columns: [
              {
                field: "name",
                title: "立项情况",
                width: 230,
                type: "inputControl",
              },
              {
                field: "value",
                title: "描述",
                type: "inputControl",
              },
            ],
          },
        },
        {
          name: "项目实施进度计划",
          type: "vxeTableControl",
          attr: {
            showHeader: false,
            headerOne: [0],
            addObj: {
              content: "",
              startTime: "",
              endTime: "",
            },
            tableData: [
              {
                content: "项目实施内容",
                startTime: "开始时间",
                endTime: "完成时间",
              },
              {
                content: "",
                startTime: "",
                endTime: "",
              },
              {
                content: "",
                startTime: "",
                endTime: "",
              },
            ],
            columns: [
              {
                field: "content",
                title: "项目实施内容",
                type: "inputControl",
                align: "center",
              },
              {
                field: "startTime",
                title: "开始时间",
                type: "dateControl",
                daterange: "date",
                placement: "bottom",
                align: "center",
              },
              {
                field: "endTime",
                title: "完成时间",
                type: "dateControl",
                daterange: "date",
                placement: "bottom",
                align: "center",
              },
            ],
          },
        },
        {
          name: "项目绩效目标",
          type: "vxeTableControl",
          attr: {
            showHeader: false,
            headerOne: [0],
            addObj: {
              longGoal: "",
              yearGoal: "",
            },
            tableData: [
              {
                longGoal: "长期目标",
                yearGoal: "年度目标",
              },
              {
                longGoal: "",
                yearGoal: "",
              },
            ],
            columns: [
              {
                field: "longGoal",
                title: "长期目标",
                type: "inputControl",
                align: "center",
              },
              {
                field: "yearGoal",
                title: "年度目标",
                type: "inputControl",
                align: "center",
              },
            ],
          },
        },
        {
          name: "长期绩效指标",
          type: "vxeTableControl",
          attr: {
            showHeader: false,
            headerOne: [0, 5],
            addObj: {
              firstIndex: "",
              secondIndex: "",
              content: "",
              indexValue: "",
              remark: "",
            },
            tableData: [
              {
                firstIndex: "一级指标",
                secondIndex: "二级指标",
                content: "指标内容",
                indexValue: "指标值",
                remark: "备注",
              },
              {
                firstIndex: "产出指标",
                secondIndex: "数量指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "产出指标",
                secondIndex: "数量指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "产出指标",
                secondIndex: "质量指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "产出指标",
                secondIndex: "质量指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "一级指标",
                secondIndex: "二级指标",
                content: "指标内容",
                indexValue: "指标值",
                remark: "备注",
              },
              {
                firstIndex: "产出指标",
                secondIndex: "时标指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "产出指标",
                secondIndex: "时标指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "产出指标",
                secondIndex: "成本指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "产出指标",
                secondIndex: "成本指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "效益指标",
                secondIndex: "经济效益指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "效益指标",
                secondIndex: "社会效益指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "效益指标",
                secondIndex: "社会效益指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "效益指标",
                secondIndex: "环境效益指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "效益指标",
                secondIndex: "环境效益指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "效益指标",
                secondIndex: "可持续影响指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "服务对象满意度指标",
                secondIndex: "具体指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "服务对象满意度指标",
                secondIndex: "具体指标",
                content: "",
                indexValue: "",
                remark: "",
              },
            ],
            columns: [
              {
                field: "firstIndex",
                title: "一级指标",
                type: "inputControl",
                align: "center",
              },
              {
                field: "secondIndex",
                title: "二级指标",
                type: "inputControl",
                align: "center",
              },
              {
                field: "content",
                title: "指标内容",
                type: "inputControl",
                align: "center",
                width: 200,
              },
              {
                field: "indexValue",
                title: "指标值",
                type: "inputControl",
                align: "center",
                width: 200,
              },
              {
                field: "remark",
                title: "备注",
                type: "inputControl",
                align: "center",
                width: 200,
              },
            ],
          },
        },
        {
          name: "年度绩效指标",
          type: "vxeTableControl",
          attr: {
            showHeader: false,
            headerOne: [0, 3],
            addObj: {
              firstIndex: "",
              secondIndex: "",
              content: "",
              indexValue: "",
              remark: "",
            },
            tableData: [
              {
                firstIndex: "一级指标",
                secondIndex: "二级指标",
                content: "指标内容",
                indexValue: "指标值",
                remark: "备注",
              },
              {
                firstIndex: "产出指标",
                secondIndex: "数量指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "产出指标",
                secondIndex: "数量指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "一级指标",
                secondIndex: "二级指标",
                content: "指标内容",
                indexValue: "指标值",
                remark: "备注",
              },
              {
                firstIndex: "产出指标",
                secondIndex: "数量指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "产出指标",
                secondIndex: "数量指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "产出指标",
                secondIndex: "质量指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "产出指标",
                secondIndex: "质量指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "产出指标",
                secondIndex: "时效指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "产出指标",
                secondIndex: "时效指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "产出指标",
                secondIndex: "成本指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "产出指标",
                secondIndex: "成本指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "效益指标",
                secondIndex: "经济效益指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "效益指标",
                secondIndex: "经济效益指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "效益指标",
                secondIndex: "社会效益指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "效益指标",
                secondIndex: "社会效益指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "效益指标",
                secondIndex: "环境效益指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "效益指标",
                secondIndex: "环境效益指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "效益指标",
                secondIndex: "可持续影响指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "效益指标",
                secondIndex: "可持续影响指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "服务对象满意度指标",
                secondIndex: "具体指标",
                content: "",
                indexValue: "",
                remark: "",
              },
              {
                firstIndex: "服务对象满意度指标",
                secondIndex: "具体指标",
                content: "",
                indexValue: "",
                remark: "",
              },
            ],
            columns: [
              {
                field: "firstIndex",
                title: "一级指标",
                type: "inputControl",
                align: "center",
              },
              {
                field: "secondIndex",
                title: "二级指标",
                type: "inputControl",
                align: "center",
              },
              {
                field: "content",
                title: "指标内容",
                type: "inputControl",
                align: "center",
                width: 200,
              },
              {
                field: "indexValue",
                title: "指标值",
                type: "inputControl",
                align: "center",
                width: 200,
              },
              {
                field: "remark",
                title: "备注",
                type: "inputControl",
                align: "center",
                width: 200,
              },
            ],
          },
        },
        {
          name: "其他说明的问题",
          type: "textAreaControl",
          value: "",
        },
        {
          name: "填报人:",
          type: "vxeTableControl",
          attr: {
            border: "none",
            showHeader: false,
            addObj: {
              name: "",
              value: "",
            },
            tableData: [
              {
                person: "单位(部门)负责人:",
                time: "填报时间:",
              },
            ],
            columns: [
              {
                field: "person",
                title: "部门负责人",
                type: "inputControl",
              },
              {
                field: "time",
                title: "填报时间",
                type: "inputControl",
              },
            ],
          },
        },
      ],
    };
  },
  props: {
    // define: {
    //   type: Object,
    //   default: () => {},
    // },
    // context: {
    //   type: Object,
    //   default: () => {},
    // },
  },
  watch: {
    tableData: {
      handler(nv, ov) {
        console.log(nv, ov);
        if (this.define.config.field) {
          this.context.dataObject.setValue(
            this.define.config.field.split(".")[1],
            JSON.stringify(nv)
          );
        }
      },
      deep: true,
    },
    value: {
      handler(nv, ov) {
        console.log("value", nv, ov);
        this.tableData = JSON.parse(nv);
      },
      deep: true,
    },
  },
  computed: {},
  methods: {
    updataTableData(nv, rowIndex) {
      this.tableData[rowIndex].attr.tableData = nv;
    },
    cellStyle({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) {
      return {
        backgroundColor:this.state == 'readOnly'? "#F3F3F3":''
      }
    },
  },
  mounted() {},
  created() {},
  beforeDestroy() {},
};
</script>
<style lang="less">
.rbcInputControl input {
  margin-left: -10px;
  width: calc(100% + 18px);
  height: 40px;
  margin-top: -3px;
  border: none;
}
.rbcInputControl textarea {
  margin-left: -10px;
  width: calc(100% + 18px);
  border: none;
}
.rbcInputControl textarea.ivu-input {
  max-width: inherit;
  font-size: 14px;
  vertical-align: revert;
}
.bill-achievements {
  .vxe-table--render-default .vxe-body--column:not(.col--ellipsis) {
    padding: 0;
    line-height: 44px;
  }
}
</style>