<template>
  <div>
    <TopTitle title="详情">
      <Button type="primary" @click="$router.go(-1)">返回</Button>
    </TopTitle>
    <TableHeader :tableHeaderList="tableHeaderList" />
    <div class="content">
      <Table :data="tableData" :columns="tableColumns" border max-height="700">
      </Table>
      <div class="content_body_page">
        <Page
          :page-size-opts="[10, 20, 30, 40, 100]"
          @on-page-size-change="changeSize"
          @on-change="changePage"
          :current="pageIndex"
          show-total
          show-elevator
          :total="total"
          show-sizer
          :page-size="pageSize"
        />
      </div>
    </div>
  </div>
</template>
<script>
import TopTitle from "../../components/TopTitle/index";
import TableHeader from "../../components/tableHeader/tableHeader.vue";
export default {
  components: {
    TopTitle,
    TableHeader,
  },
  data() {
    return {
      tableData: [],
      tableColumns: [
        {
          title: "序号",
          type: "index",
          align: "center",
          key: "",
          minWidth: 80,
        },
        { title: "PId", align: "center", key: "PId", minWidth: 100 },
        {
          title: "锁定计划",
          align: "center",
          key: "lock_plan",
          render: (h, params) => {
            return h("div", [
              h("Checkbox", {
                props: {
                  value: params.row.lock_plan == 0 ? true : false,
                  disabled: true,
                },
              }),
            ]);
          },
        },
        {
          title: "套料",
          align: "center",
          width: 80,

          key: "jacking",
          render: (h, params) => {
            return h("div", [
              h("Checkbox", {
                props: {
                  value: params.row.jacking == 0 ? true : false,
                  disabled: true,
                },
              }),
            ]);
          },
        },
        {
          title: "下达",
          align: "center",
          width: 80,

          key: "issued",
          render: (h, params) => {
            return h("div", [
              h("Checkbox", {
                props: {
                  value: params.row.issued == 0 ? true : false,
                  disabled: true,
                },
              }),
            ]);
          },
        },
        {
          title: "分架人",
          align: "center",
          key: "points_plane",
          minWidth: 100,
        },
        {
          title: "分厂",
          align: "center",
          width: 100,
          key: "branch",
        },
        { title: "下达用户", align: "center", key: "form_user", minWidth: 100 },
        {
          title: "下达日期",
          align: "center",
          minWidth: 120,

          key: "quitting_time",
          render: (h, params) => {
            const { row } = params;
            return h("span", {}, this.func.replaceDateNoHMS(row.quitting_time));
          },
        },
        {
          title: "客户编码",
          align: "center",
          key: "customer_number",
          minWidth: 100,
        },
        {
          title: "对方单号",
          align: "center",

          minWidth: 100,
          key: "adverse_odd",
        },
        {
          title: "流程卡号",
          align: "center",
          key: "card_number",
          minWidth: 100,
        },
        {
          title: "片标记",
          align: "center",
          key: "piece_markup",
          minWidth: 100,
        },
        {
          title: "恒卡号",
          align: "center",
          key: "constant_number",
          minWidth: 100,
        },
        {
          title: "单卡片",
          align: "center",
          key: "single_card",
          minWidth: 100,
        },
        {
          title: "次破单号",
          align: "center",
          key: "cipi_card",
          minWidth: 100,
        },
        {
          title: "发现位置",
          align: "center",
          key: "found_location",
          minWidth: 100,
        },
        {
          title: "交货日期",
          align: "center",
          minWidth: 120,

          key: "delivery_date",
          render: (h, params) => {
            const { row } = params;
            return h("span", {}, this.func.replaceDateNoHMS(row.delivery_date));
          },
        },
        {
          title: "总数量",
          align: "center",
          key: "total",
          minWidth: 100,
        },
        {
          title: "总面积",
          align: "center",
          key: "total_area",
          minWidth: 100,
        },
        {
          title: "总周长",
          align: "center",
          key: "total_perimeter",
          minWidth: 100,
        },
        {
          title: "工艺流程",
          align: "center",
          key: "technological_process",
          minWidth: 100,
        },
        { title: "厚度", align: "center", key: "thickness", minWidth: 100 },
        {
          title: "后缀",
          align: "center",
          key: "suffix",
          minWidth: 100,
        },
        { title: "备注", align: "center", key: "remark", minWidth: 100 },
        {
          title: "一级地区",
          align: "center",
          key: "secondary_region",
          minWidth: 100,
        },
        { title: "二级地区", align: "center", key: "cacem", minWidth: 100 },
        { title: "订单类型", align: "center", key: "orderType", minWidth: 100 },
        {
          title: "流程卡交货日期",
          align: "center",
          key: "flow_card_date",
          minWidth: 150,
          render: (h, params) => {
            const { row } = params;
            return h("span", {}, this.func.flow_card_date(row.delivery_date));
          },
        },
        {
          title: "切割",
          align: "center",
          key: "slicing",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.slicing == 0 ? "<Icon type='ios-checkmark' />" : "",
                },
              }),
            ]);
          },
        },
        {
          title: "磨边  ",
          align: "center",
          key: "edging",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.edging == 0 ? "<Icon type='ios-checkmark' />" : "",
                },
              }),
            ]);
          },
        },
        {
          title: "打孔",
          align: "center",
          key: "punching",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.punching == 0 ? "<Icon type='ios-checkmark' />" : "",
                },
              }),
            ]);
          },
        },
        {
          title: "挖角",
          align: "center",
          key: "poach",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.poach == 0 ? "<Icon type='ios-checkmark' />" : "",
                },
              }),
            ]);
          },
        },
        {
          title: "清洗",
          align: "center",
          key: "rinse",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.rinse == 0 ? "<Icon type='ios-checkmark' />" : "",
                },
              }),
            ]);
          },
        },
        {
          title: "钢化",
          align: "center",
          key: "toughened",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.toughened == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
        {
          title: "磨砂",
          align: "center",
          key: "abrazine",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.abrazine == 0 ? "<Icon type='ios-checkmark' />" : "",
                },
              }),
            ]);
          },
        },
        {
          title: "中空",
          align: "center",
          key: "cavity",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.cavity == 0 ? "<Icon type='ios-checkmark' />" : "",
                },
              }),
            ]);
          },
        },
        {
          title: "夹胶",
          align: "center",
          key: "doubling",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.doubling == 0 ? "<Icon type='ios-checkmark' />" : "",
                },
              }),
            ]);
          },
        },
        {
          title: "清洗配对",
          align: "center",
          key: "clean_pair",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.clean_pair == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
        {
          title: "丝印",
          align: "center",
          key: "screen_printing",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.screen_printing == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
        {
          title: "夹层后磨边",
          align: "center",
          key: "interlayer_edging",
          minWidth: 130,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.interlayer_edging == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
        {
          title: "来料",
          align: "center",
          key: "incoming_material",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.incoming_material == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
        {
          title: "外协",
          align: "center",
          key: "outsource",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.outsource == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
        {
          title: "夹层",
          align: "center",
          key: "interlayer",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.interlayer == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
        {
          title: "渡膜",
          align: "center",
          key: "coating",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.coating == 0 ? "<Icon type='ios-checkmark' />" : "",
                },
              }),
            ]);
          },
        },
        {
          title: "外协工序",
          align: "center",
          key: "able_work",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.able_work == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
        {
          title: "外协镀膜",
          align: "center",
          key: "outsourcing_coating",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.outsourcing_coating == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
        {
          title: "外协夹胶",
          align: "center",
          key: "outsourcing_laminating",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.outsourcing_laminating == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
        {
          title: "清检",
          align: "center",
          key: "qing_inspection",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.qing_inspection == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
        {
          title: "清洗2",
          align: "center",
          key: "cleaning2",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.cleaning2 == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
        {
          title: "蚀刻",
          align: "center",
          key: "etch",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.etch == 0 ? "<Icon type='ios-checkmark' />" : "",
                },
              }),
            ]);
          },
        },
        {
          title: "清洗3",
          align: "center",
          key: "cleaning3",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.cleaning3 == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
        {
          title: "百叶【外协】",
          align: "center",
          key: "blind_outsource",
          minWidth: 130,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.blind_outsource == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
        {
          title: "挑玻璃",
          align: "center",
          key: "dolly",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.dolly == 0 ? "<Icon type='ios-checkmark' />" : "",
                },
              }),
            ]);
          },
        },
        {
          title: "首道外协",
          align: "center",
          key: "byoutsourcing",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.byoutsourcing == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
        {
          title: "异形",
          align: "center",
          key: "heteromorphic",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.heteromorphic == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
        {
          title: "复合外协",
          align: "center",
          key: "composite_outsourcing",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.composite_outsourcing == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
        {
          title: "合片",
          align: "center",
          key: "laminating",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.laminating == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
        {
          title: "打肌理胶",
          align: "center",
          key: "play_texture_gel",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.play_texture_gel == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
        {
          title: "保护角",
          align: "center",
          key: "shielding_angle",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.shielding_angle == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
        {
          title: "配片",
          align: "center",
          key: "with_pieces",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.with_pieces == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
        {
          title: "一度工序",
          align: "center",
          key: "once_process",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.once_process == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
        {
          title: "二次中空",
          align: "center",
          key: "second_hollow",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.second_hollow == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
        {
          title: "烤漆",
          align: "center",
          key: "stoving_varnish",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.stoving_varnish == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
        {
          title: "真空1",
          align: "center",
          key: "vacuum1",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.vacuum1 == 0 ? "<Icon type='ios-checkmark' />" : "",
                },
              }),
            ]);
          },
        },
        {
          title: "成品库",
          align: "center",
          key: "finished_products_warehouse",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.finished_products_warehouse == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
        {
          title: "镀膜2",
          align: "center",
          key: "coating2",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.coating2 == 0 ? "<Icon type='ios-checkmark' />" : "",
                },
              }),
            ]);
          },
        },
        {
          title: "百叶",
          align: "center",
          key: "bean_curd_blade",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span ", {
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
                    params.bean_curd_blade == 0
                      ? "<Icon type='ios-checkmark' />"
                      : "",
                },
              }),
            ]);
          },
        },
      ],
      pageSize: 10,
      pageIndex: 1,
      total: 0,
      tableHeaderList: [
        { title: "ID", value: "56782" },
        { title: "单据状态", value: "已审核" },
        { title: "客户编号", value: "0300021" },
        { title: "客户名称", value: "杨运" },
        { title: "地区", value: "浙江杭州" },
        { title: "工程ID", value: "2345" },
        { title: "工程名称", value: "绣菊园" },
        { title: "单据编号", value: "81641" },
        { title: "合同编号", value: "284134" },
        { title: "对方编号", value: "" },
        { title: "包装方式", value: "" },
        { title: "订单类型", value: "普通订单" },
        { title: "铝条方式", value: "" },
        { title: "业务员", value: "涨溢" },
        { title: "联系人", value: "12345678909" },
        { title: "报表日期", value: "2022.5.26" },
        { title: "总周长", value: "245.145" },
        { title: "总数量", value: "30" },
        { title: "总结算面积", value: "49.14" },
        { title: "总金额", value: "422.66" },
        { title: "收款金额", value: "" },
        { title: "折扣金额", value: "" },
        { title: "欠款金额", value: "" },
        { title: "总实际面积", value: "3614.661" },
        { title: "工艺员", value: "张阿" },
        { title: "打印次数", value: "0" },
        { title: "审核日期", value: "2022.5.26" },
        { title: "交货日期", value: "2022.5.26" },
      ],
    };
  },
  mounted() {},
  methods: {
    changeSize() {},
    changePage() {},
  },
};
</script>
<style lang="scss" scoped>
.content_body_page {
  text-align: center;
  margin-top: 20px;
}
</style>