<template>
  <div>
    <el-row :gutter="20" class="el-row" type="flex">
      <el-col :span="10" class="el-col">
        <div class="text item">
          <div class="itemTag">
            <span>单据类型名称:&nbsp;</span>
          </div>
          <el-input
              style="width: 200px"
              size="small"
              clearable
              splaceholder="请输入内容"
              :disabled="!isAdd"
              v-model.trim="inputQuery.name"
          ></el-input>
        </div>
      </el-col>
      <el-col :span="10" class="el-col">
        <div class="text item">
          <div class="itemTag">
            <span>单据类型代码:&nbsp;</span>
          </div>
          <el-input
              style="width: 200px"
              :disabled="!isAdd"
              clearable
              size="small"
              splaceholder="请输入内容"
              v-model.trim="inputQuery.action"

          ></el-input>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="el-row" type="flex">
      <el-col :span="10" class="el-col">
        <div class="text item">
          <div class="itemTag">
            <span>第三方系统:&nbsp;</span>
          </div>
          <el-select v-model="inputQuery.thirdSys" placeholder="请选择" clearable="true">
            <el-option
                v-for="item in thirdSys"
                :key="item.value"
                :label="item.thirdName"
                :value="item.thirdId">
              <span style="float: left">{{ item.thirdName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.thirdId }}</span>
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="10" class="el-col">
        <div class="text item">
          <div class="itemTag">
            <span>备注:&nbsp;</span>
          </div>
          <el-input
              style="width: 200px"
              size="small"
              splaceholder="请输入内容"
              v-model="inputQuery.remark"
          ></el-input>
        </div>
      </el-col>
    </el-row>

    <el-divider></el-divider>
  </div>
</template>

<script>

import {
  getBasicThirdSys,
} from "../../api/basic/basicThirdSys";

import {
  getLocalBusType,
} from "../../api/basic/busLocalType";

export default {
  name: "inputQuery",
  props: {
    inputQuery: {
      type: Object,
      required: true,
    },
  },

  data() {
    return {
      filterQuery: {
        enabled: true,
        isBuType: true,
      },
      thirdSys: [],
      localTypes: [],
      isAdd: false,
      value: "",
    }
  },
  methods: {
    getList() {
      getBasicThirdSys(this.filterQuery)
          .then((response) => {
            this.thirdSys = response.data.list || [];
          })
          .catch(() => {
            this.loading = false;
            this.list = [];
          });
      getLocalBusType(this.filterQuery)
          .then((response) => {
            this.localTypes = response.data.list || [];
          })
          .catch(() => {
            this.loading = false;
            this.localTypes = [];
          });
    },

  },

  created() {
    if (this.inputQuery.action == "") {
      this.isAdd = true;
    }
    this.getList();
  },
};
</script>

<style scoped>
.itemTag {
  float: left;
  text-align: left;
  margin-top: 10px;
  width: 100px;
}

.text {
  font-size: 13px;
  font-family: "Microsoft YaHei";
}

.el-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
  flex-wrap: wrap;
}
</style>
