<template>
  <div>
    <Drawer
      title="建单"
      :width="600"
      class="f-drawer"
      @on-close="onClose"
      v-model="dialog"
    >
      <i-form
        ref="form"
        v-if="show"
        class="f-drawer__body"
        :label-width="75"
        :rules="rules"
        :model="form"
      >
        <Row>
          <i-col :span="12">
            <FormItem label="工单类型" prop="type">
              <Select
                disabled
                v-model="submitForm.type"
                placeholder="请选择工单类型"
              >
                <Option
                  v-for="t in ticket_types"
                  :label="t.name"
                  :key="t.id"
                  :value="t.id"
                />
              </Select>
            </FormItem>
          </i-col>
          <i-col :span="10">
            <FormItem label="服务期限">
              <InputNumber
                style="width: 100%"
                :min="0"
                placeholder="请输入服务期限"
                v-model="submitForm.term"
              />
            </FormItem>
          </i-col>
          <i-col :span="2">
            <span style="line-height: 32px;padding-left: 4px">分钟</span>
          </i-col>
        </Row>
        <FormItem label="当前指派" v-if="submitForm.type" prop="assignee">
          <user-select
            placeholder="请选择当前工单指派人员"
            :roles="userroles"
            v-model="submitForm.assignee"
          />
        </FormItem>

        <FormItem label="工单地址">
          <Input
            type="textarea"
            v-model="submitForm.address"
            placeholder="请输入工单地址"
          />
        </FormItem>
        <FormItem label="地理位置">
          <i-input v-model="submitForm.position" placeholder="请输入地理位置">
            <span slot="append">
              <Button @click="showMap = true">选取</Button>
            </span>
          </i-input>
        </FormItem>
        <FormItem label="工单内容">
          <Input
            type="textarea"
            v-model="submitForm.desc"
            placeholder="请输入工单内容"
          />
        </FormItem>
        <FormItem label="工单备注">
          <Input
            type="textarea"
            v-model="submitForm.remark"
            placeholder="请输入工单备注"
          />
        </FormItem>
      </i-form>
      <div class="f-drawer__footer">
        <Button @click="on_cancel">取消</Button>
        <Button @click="on_submit" :loading="formLoading" type="primary"
          >确定</Button
        >
      </div>
    </Drawer>
    <map-position
      @on-select="onGetPosition"
      :position="submitForm.position"
      :type="'create'"
      :show.sync="showMap"
    />
  </div>
</template>
<script>
import { mapState } from "vuex";
import tag from "graphql-tag";
export default {
  name: "ticket-create",
  props: {
    show: Boolean,
    type: { type: String, required: true }, // 工单类型的id或者名称
    form: { type: Object, required: false, default: {} },
    onCancel: Function,
    onSubmit: Function
  },
  data() {
    return {
      dialog: false,
      showMap: false,
      formLoading: false,
      submitForm: {},
      roles: [{}],
      userroles: []
    };
  },
  computed: {
    ...mapState("common", ["ticket_types"])
  },
  watch: {
    show(v) {
      this.submitForm = { ...this.form };
      this.watchTicketType(this.type);
      this.dialog = v;
    }
  },
  methods: {
    onGetPosition(info) {
      if (this.submitForm.address != info.address) {
        if (!this.submitForm.address || this.submitForm.address.length == 0) {
          this.updateForm({
            address: info.address,
            position: info.lnglat
          });
          return;
        }
        setTimeout(() => {
          this.$Modal.confirm({
            title: "提示",
            content: `
                <h3>选取的地址与当前工单地址不一致，需要替换吗？</h3>
                <h5 style="color: #333;font-weight: bold">"${this.submitForm.address}"</h5>
                <span style="font-size: 12px;">替换为</span>
                <h5 style="color: #333;font-weight: bold">"${info.address}"</h5>
            `,
            onOk: () => {
              this.updateForm({
                address: info.address,
                position: info.lnglat
              });
            }
          });
        }, 400);
      }
    },
    updateForm(form) {
      this.submitForm = { ...this.submitForm, ...form };
    },
    on_submit() {
      if (this.onSubmit) {
        return this.onSubmit(this.submitForm);
      }
      let iot = ((this.$apolloProvider || {}).clients || {}).iot;
      if (!iot) return;
      iot
        .mutate({
          mutation: tag`
            mutation TicketCreate($input:ITicket!) {
                ticket_create(input: $input) {
                    id
                }
            }
          `,
          variables: {
            input: this.submitForm
          }
        })
        .then(r => {
          this.$emit("submit-ok", r.data.ticket_create);
          this.onClose();
        })
        .catch(r => {
          console.error("新建工单异常：", r);
          this.onClose();
          this.$emit("submit-error", r);
        });
    },
    on_cancel() {
      this.dialog = false;
      if (this.onCancel) {
        return this.onCancel();
      }
      this.onClose();
    },
    onClose() {
      this.$emit("update:show", false);
    },
    watchTicketType(v) {
      let t = this.ticket_types.find(t => t.id == v);
      if (!t) {
        t = this.ticket_types.find(t => t.name == v);
        if (!t) {
          console.error("没有找到该工单类型", v);
          return;
        }
      }
      this.submitForm.type = t.id;
      this.userroles = t.sstate.roles;
    }
  },
  created() {},
  mounted() {
    this.submitForm = { ...this.form };
    this.watchTicketType(this.type);
  }
};
</script>
<style lang="less" scoped></style>
